homework/hw-js-05-objects-in-json/js/task-01.js

// 3 persons

// -------------УСЛОВИЕ-------------
// Сделать три ассоциативных массива a, b, c, в каждом из которых должны быть поля name и surname.

// -------------РЕШЕНИЕ-------------

const task01block = document.createElement('div');
task01block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task01title = document.createElement('h2');
task01title.innerText = 'Task-01 3 persons';
const obja1 = document.createElement('p');
const objb1 = document.createElement('p');
const objc1 = document.createElement('p');
root.appendChild(task01block); 
task01block.appendChild(task01title); 


class PersonObj {
    constructor() {
        this.name = "";
        this.surname = "";
    }
}  

const a = new PersonObj();
const b = new PersonObj();
const c = new PersonObj();
a.name ='Боб';
a.surname = 'Губка';
b.name ='Патрик';
b.surname = 'Звезда';
c.name ='Сквидварт';
c.surname ='Осьминог';
obja1.innerText = `a=${JSON.stringify(a)}`;
objb1.innerText = `b=${JSON.stringify(b)}`;
objc1.innerText = `c=${JSON.stringify(c)}`;

task01block.appendChild(obja1);
task01block.appendChild(objb1);
task01block.appendChild(objc1);
// different fields

// -------------УСЛОВИЕ-------------
// Добавьте некоторые другие поля (например age, fathername, sex (пол)) так, что бы набор полей отличался у разных объектов

// -------------РЕШЕНИЕ-------------

const task02block = document.createElement('div');
task02block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task02title = document.createElement('h2');
task02title.innerText = 'Task-02 Different fields';
const obja2 = document.createElement('p');
const objb2 = document.createElement('p');
const objc2 = document.createElement('p');
root.appendChild(task02block); 
task02block.appendChild(task02title); 
a.age = '25';
b.fathername = 'Патрикович';
c.sex = 'Мужчина';
obja2.innerText = `a=${JSON.stringify(a)}`;
objb2.innerText = `b=${JSON.stringify(b)}`;
objc2.innerText = `c=${JSON.stringify(c)}`;

task02block.appendChild(obja2);
task02block.appendChild(objb2);
task02block.appendChild(objc2);

// fields check

// -------------УСЛОВИЕ-------------
// Проверьте наличие необязательных полей у каждого из этих массивов.Если поле найдено, выведите его с помощью alert.
// Проверку делайте по typeof или in в if.

// -------------РЕШЕНИЕ-------------

const task03block = document.createElement('div');
task03block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task03title = document.createElement('h2');
task03title.innerText = 'Task-03 Fields check';
const checkBtn = document.createElement('button');
checkBtn.innerText = 'Check the fields';
checkBtn.style = 'margin-bottom:10px';
root.appendChild(task03block); 
task03block.appendChild(task03title); 
task03block.appendChild(checkBtn); 

const combinePersons = [ a, b, c ];
a.id = 'a';
b.id = 'b';
c.id = 'c';

checkBtn.onclick = () => {
    for (let person of combinePersons) {
        for (let key in person) {
            if (!(key === 'name' || key === 'surname'||key === 'id')) { alert(`В объекте {${person.id}} есть необязятельное поле '${key}'`) }
                    }
    }
}

// array of persons

// -------------УСЛОВИЕ-------------
// Добавьте несколько ассоциативных массивов с персонами в обычный массив persons, например a, b, c. 
// Также добавьте персону литерально({ ...}).Получится обычный массив с элементами - ассоциативными массивами с персонами.

// -------------РЕШЕНИЕ-------------
const task04block = document.createElement('div');
task04block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task04title = document.createElement('h2');
const obj4 = document.createElement('p');
task04title.innerText = 'Task-04 Array of persons';
root.appendChild(task04block); 
task04block.appendChild(task04title); 

let persons = [a, b, c];
persons = [...persons, { name: 'Ларри', surname: 'Лобстер' }];
obj4.innerText = `persons=${JSON.stringify(persons)}`;
task04block.appendChild(obj4);

// loop of persons

// -------------УСЛОВИЕ-------------
// Сделайте цикл, который выводит весь массив persons в форме объектов console.log(persons[i])

// -------------РЕШЕНИЕ-------------

const task05block = document.createElement('div');
task05block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task05title = document.createElement('h2');
task05title.innerText = 'Task-05 Loop of persons';
const objOutputBtn = document.createElement('button');
objOutputBtn.innerText = 'Start console output';
objOutputBtn.style = 'margin-bottom:10px';
root.appendChild(task05block); 
task05block.appendChild(task05title); 
task05block.appendChild(objOutputBtn); 
objOutputBtn.onclick = () => { 
    for (let i = 0; i < persons.length; i++) { console.log({ ...persons[i] }) };
}

// loop of name and surname

// -------------УСЛОВИЕ-------------
// Сделайте цикл, который выводит весь массив persons, но только Имя и Фамилию каждой персоны.

// -------------РЕШЕНИЕ-------------

const task06block = document.createElement('div');
task06block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task06title = document.createElement('h2');
const task06comment = document.createElement('p');
task06comment.innerText = 'Как я поняла, нужно выводить не массивы Object.entries, а именно объекты с 2мя полями. Реализовала путем копирования данных в другой массив объектов и удаления ненужных полей. Или как надо было?';
task06title.innerText = 'Task-06 Loop of name and surname';
const objNameSurnameOutputBtn = document.createElement('button');
objNameSurnameOutputBtn.innerText = 'Start console Name&Surname output';
objNameSurnameOutputBtn.style = 'margin-bottom:10px';

root.appendChild(task06block); 
task06block.appendChild(task06title); 
task06block.appendChild(task06comment); 
task06block.appendChild(objNameSurnameOutputBtn); 
 
objNameSurnameOutputBtn.onclick = () => {
    for (let i = 0; i < persons.length; i++) {
        const subPersons = persons[i];
        for (let key in subPersons) {
            if (!(key==='name' || key==='surname'))
             { delete subPersons[key]}
        }
        console.log({ ...subPersons });
        }
 }

 // loop of loop of values

// -------------УСЛОВИЕ-------------
// Сделайте цикл, который выводит весь массив persons, но только значения всех полей из объектов. 
// Используйте вложенный цикл

// -------------РЕШЕНИЕ-------------
const task07block = document.createElement('div');
task07block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task07title = document.createElement('h2');
task07title.innerText = 'Task-07  Loop of loop of values';
const valuesOutputBtn = document.createElement('button');
valuesOutputBtn.innerText = 'Start consol values output';
valuesOutputBtn.style = 'margin-bottom:10px';

root.appendChild(task07block); 
task07block.appendChild(task07title); 
task07block.appendChild(valuesOutputBtn); 
 
valuesOutputBtn.onclick = () => {
        for (let i = 0; i < persons.length; i++) {
            for (let value of Object.values(persons[i])) {
                 console.log(value);
                   }
       
        }
 }

 // fullName

// -------------УСЛОВИЕ-------------
// Сделайте цикл, которых добавляет поле fullName в каждый объект, содержащий ФИО.
// Учтите, что поле fathername не является обязательным.

// -------------РЕШЕНИЕ-------------

const task08block = document.createElement('div');
task08block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task08title = document.createElement('h2');
const task08startArray = document.createElement('p');
task08startArray.innerText = `Начальный массив persons=${JSON.stringify(persons)}`;
task08title.innerText = 'Task-08 FullName';
const addFullNameBtn = document.createElement('button');
addFullNameBtn.innerText = 'Добавить поле fullName';
addFullNameBtn.style = 'margin-bottom:10px';
root.appendChild(task08block); 
task08block.appendChild(task08title);
task08block.appendChild(task08startArray);  
task08block.appendChild(addFullNameBtn); 


addFullNameBtn.onclick = () => {
    for (let i = 0; i < persons.length; i++) {
        persons[i].fullname = persons[i].surname + ' ' + persons[i].name+((persons[i].fathername)?(" "+persons[i].fathername):'');
         }
    const task08finalArray = document.createElement('p');
    task08finalArray.innerText = `Обновленный массив persons=${JSON.stringify(persons)}`;
    task08block.appendChild(task08finalArray);  
}
 
// serialize

// -------------УСЛОВИЕ-------------
// Создайте JSON-строку из persons

// -------------РЕШЕНИЕ-------------

const task09block = document.createElement('div');
task09block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task09title = document.createElement('h2');
task09title.innerText = 'Task-09 Serialize';
const convertJSONBtn = document.createElement('button');
convertJSONBtn.innerText = 'Вывести JSON-строку persons в консоль';
convertJSONBtn.style = 'margin-bottom:10px';
root.appendChild(task09block); 
task09block.appendChild(task09title); 
task09block.appendChild(convertJSONBtn); 
convertJSONBtn.onclick = () => { 
    console.log(JSON.stringify(persons));
   }

// deserialize

// -------------УСЛОВИЕ-------------
// Создайте ассоциативный массив с одной персоной из JSON-строки. Добавьте её в persons

// -------------РЕШЕНИЕ-------------

const task10block = document.createElement('div');
task10block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task10title = document.createElement('h2');
task10title.innerText = 'Task-10 Deserialize';
const addJsonBtn = document.createElement('button');
addJsonBtn.innerText = 'Добавить JSON-персону в persons';
addJsonBtn.style = 'margin-bottom:10px';
root.appendChild(task10block); 
task10block.appendChild(task10title); 
task10block.appendChild(addJsonBtn); 
addJsonBtn.onclick = () => { 
    const jsonPerson = '{ "name": "Сэнди", "surname": "Белка" }';
    console.log(jsonPerson);
    persons.push(JSON.parse(jsonPerson));
    console.log(persons);
    const task10persons = document.createElement('p');
    task10persons.innerText = `newPersons=${JSON.stringify(persons)}`;
    task10block.appendChild(task10persons);
}
      
// HTML

// -------------УСЛОВИЕ-------------
// Сделайте цикл, который выводит весь массив persons, в форме HTML-таблицы. Имя и Фамилия - колонки.
// Пример кода:
// var str = "<table border='1'>"
// for (let i=0;i<1;i++){
//     str += `<tr><td>${i}</td><td>адын</td></tr>`
// }
// str += "</table>"

// console.log(str)
// document.write(str)
// Модифицируйте код так, чтобы он выводил массив persons

// -------------РЕШЕНИЕ-------------
const task11block = document.createElement('div');
task11block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task11title = document.createElement('h2');
task11title.innerText = 'Task-11 HTML';
const makeTableBtn = document.createElement('button');
makeTableBtn.innerText = 'Сформировать таблицу';
makeTableBtn.style = 'margin-bottom:11px';
root.appendChild(task11block); 
task11block.appendChild(task11title); 
task11block.appendChild(makeTableBtn); 
makeTableBtn.onclick = () => {
    var str = "<table border='1'><caption>Persons</caption><tr><th>№</th><th>Name</th><th>Surname</th>"
 for (let i=0;i<persons.length;i++){
    str += `<tr><td>&nbsp${i+1}&nbsp</td><td>&nbsp${persons[i].name}&nbsp</td><td>&nbsp${persons[i].surname}&nbsp</td></tr>`
}
str += "</table>"
    const task11table = document.createElement('div');
    task11table.innerHTML = str;
    console.log(str);
    task11block.appendChild(task11table);
}
 
// HTML optional fields

// -------------УСЛОВИЕ-------------
// Сделайте цикл, который выводит весь массив persons, в форме HTML - таблицы. 
// Имя и Фамилия, а также другие поля при наличии. Колонки: поля, строки таблицы - персоны.

// -------------РЕШЕНИЕ-------------
const task12block = document.createElement('div');
task12block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task12title = document.createElement('h2');
task12title.innerText = 'Task-12 HTML optional fields';
const makeAllFieldsTableBtn = document.createElement('button');
makeAllFieldsTableBtn.innerText = 'Сформировать таблицу с полным перечнем полей';
makeAllFieldsTableBtn.style = 'margin-bottom:12px';
root.appendChild(task12block); 
task12block.appendChild(task12title); 
task12block.appendChild(makeAllFieldsTableBtn); 
makeAllFieldsTableBtn.onclick = () => {
    var str = "<table border='1'><caption>Persons</caption><tr><th th >№</th>";
    let keys = [];
    let result = [];
   
    for (let i = 0; i < persons.length; i++) {
        keys = Object.keys(persons[i]);
        result = [...result, ...keys];  
    }
   
    keys=[...new Set(result)];
    for (let key of keys) {
        str += `<th>${key}</th>`;
    }
        str += `</tr>`;
    for (let i = 0; i < persons.length; i++){
        str += `<tr><td>&nbsp person ${i + 1}&nbsp</td>`;

         for (let key of keys) {  
                (Object.keys(persons[i]).includes(key))?(str += `<td>&nbsp${persons[i][key]}&nbsp</td>`):(str += `<td>&nbsp---&nbsp</td>`);
            };
        str += `</tr>`;
      }
str += "</table>"
    const task12table = document.createElement('div');
    task12table.innerHTML = str;
    task12block.appendChild(task12table);
}
 
// HTML tr color

// -------------УСЛОВИЕ-------------
// Добавьте к предыдущему примеру раскраску через строчку используя другой стиль тэга tr.

// -------------РЕШЕНИЕ-------------
const task13block = document.createElement('div');
task13block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task13title = document.createElement('h2');
task13title.innerText = 'Task-13 HTML tr color';
const makeColorTrTableBtn = document.createElement('button');
makeColorTrTableBtn.innerText = 'Form colorful table';
makeColorTrTableBtn.style = 'margin-bottom:13px';
root.appendChild(task13block); 
task13block.appendChild(task13title); 
task13block.appendChild(makeColorTrTableBtn); 
makeColorTrTableBtn.onclick = () => {
    var str = "<table border='1'><caption>Persons</caption><tr><th th >№</th>";
    let keys = [];
    let result = [];
   
    for (let i = 0; i < persons.length; i++) {
        keys = Object.keys(persons[i]);
        result = [...result, ...keys];  
    }
   
    keys=[...new Set(result)];
    for (let key of keys) {
        str += `<th>${key}</th>`;
    }
        str += `</tr>`;
    for (let i = 0; i < persons.length; i++){
        i%2?(str += `<tr><td>&nbsp person ${i + 1}&nbsp</td>`):(str += `<tr style='background-color:rgb(170, 214, 243)'><td>&nbsp person ${i + 1}&nbsp</td>`);
         for (let key of keys) {  
                (Object.keys(persons[i]).includes(key))?(str += `<td>&nbsp${persons[i][key]}&nbsp</td>`):(str += `<td>&nbsp---&nbsp</td>`);
            };
        str += `</tr>`;
      }
str += "</table>"
    const task13table = document.createElement('div');
    task13table.innerHTML = str;
    task13block.appendChild(task13table);
}
    
// HTML th optional

// -------------УСЛОВИЕ-------------
// Переработайте вывод persons в HTML с поиском всех возможных колонок во всех записях,
//     выводом названий колонок в заголовок HTML - таблицы.Для решения этой задачи вначале узнайте множество полей(ключей)
//     во всех записях(они не совпадают), выведите HTML - заголовок используя тэги < th >, а потом выводите все записи.
//     Ниже выведите все персоны построчно.Следите за корректностью колонок.Для этого вам нужно итерировать общий набор колонок,
//     а не каждую персону, колонки из которой могут отличаться от предыдущей.

// -------------РЕШЕНИЕ-------------

const task14block = document.createElement('div');
task14block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task14title = document.createElement('h2');
const task14comment = document.createElement('p');
task14title.innerText = 'Task-14 HTML th optional';
task14comment.innerText = 'Не поняла, чем отличается от 12-го задания (в нем сделала то же самое)';
const formTable14Btn = document.createElement('button');
formTable14Btn.innerText = 'Сформировать таблицу';
formTable14Btn.style = 'margin-bottom:14px';
root.appendChild(task14block); 
task14block.appendChild(task14title); 
task14block.appendChild(task14comment); 
task14block.appendChild(formTable14Btn); 
 
formTable14Btn.onclick = () => {  var str = "<table border='1'><caption>Persons</caption><tr><th th >№</th>";
    let keys = [];
    let result = [];
   
    for (let i = 0; i < persons.length; i++) {
        keys = Object.keys(persons[i]);
        result = [...result, ...keys];  
    }
   
    keys=[...new Set(result)];
    for (let key of keys) {
        str += `<th>${key}</th>`;
    }
        str += `</tr>`;
    for (let i = 0; i < persons.length; i++){
        str += `<tr><td>&nbsp person ${i + 1}&nbsp</td>`;

         for (let key of keys) {  
                (Object.keys(persons[i]).includes(key))?(str += `<td>&nbsp${persons[i][key]}&nbsp</td>`):(str += `<td>&nbsp---&nbsp</td>`);
            };
        str += `</tr>`;
      }
str += "</table>"
    const task14table = document.createElement('div');
    task14table.innerHTML = str;
    task14block.appendChild(task14table); }