homework/05/src/App.js

// 3 persons

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

var a = {
  name: 'Vasya',
  surname: 'Pupkin'
}

var b = {
  name: 'Sanya',
  surname: 'Beliy'
}

var c = {
  name: 'Petro',
  surname: 'Poroshenko'
}

// different fields

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

a.age = '18';
b.fathername = 'Mikhailovich';
c.sex = 'Male';

// fields check

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

if ("fathername" in a) {
  alert(a.fathername + ' in a');
}
else {
  if ("fathername" in b) {
    alert(b.fathername + ' in b');
  }
  else {
    if ("fathername" in c) {
      alert(c.fathername + ' in c');
    }
  }
}

// array of persons

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

var persons = [];
persons.push(a);
persons.push(b);
persons.push(c);
var d = {
  name: 'Kyril',
  surname: 'NeKyril'
};
persons[3] = d;
console.log(persons);

// loop of persons

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

for (let i = 0; i < persons.length; i++) {
  console.log(persons[i]);
}

// loop of name and surname

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

for (let i = 0; i < persons.length; i++) {
  console.log(persons[i].name + ' ' + persons[i].surname);
}

// loop of loop of values

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

for (let i = 0; i < persons.length; i++) {
  console.log(Object.values(persons[i]));
}

// fullName

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

for (let i = 0; i < persons.length; i++) {
  if ('fathername' in persons[i]) {
    persons[i].fullName = persons[i].surname + ' ' + persons[i].name + ' ' + persons[i].fathername;
    console.log(persons[i].fullName);
  }
  else {
    persons[i].fullName = persons[i].surname + ' ' + persons[i].name;
    console.log(persons[i].fullName);
  }
}

// serialize

// Создайте JSON-строку из persons

var pers = JSON.stringify(persons);
console.log(pers);

// deserialize

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

var persona = JSON.parse('{"name":"Vasya","surname":"Pupkin","age":"18","fullName":"Pupkin Vasya"}');
console.log(persona);
persons.push(persona);
console.log(persons);

// 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

var str = "<table border='1'>";
var counter = 1;
for (let i = 0; i < persons.length; i++) {
  str += `<tr><td>${counter}</td><td>${Object.values(persons[i])}</td></tr>`;
  counter++;
}
str += "</table>";
str += "</br>"

document.write(str);

// HTML optional fields

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

var table = "<table border='1'>";
var counter = 1;
for (let i = 0; i < persons.length; i++) {
  table += `<tr><td>${counter}</td>`;
  for (var key in persons[i]) {
    table += `<td>${(persons[i])[key]}</td>`;
  }
  table += `</tr>`
  counter++;
}
table += "</table>";
table += "</br>";

document.write(table);

// HTML tr color

// Добавьте к предыдущему примеру раскраску через строчку используя другой стиль тэга tr.

var table = "<table border='1'>";
var counter = 1;
for (let i = 0; i < persons.length; i++) {
  table += `<tr style="background-color: gray"><td>${counter}</td>`;
  for (var key in persons[i]) {
    table += `<td>${(persons[i])[key]}</td>`;
  }
  table += `</tr>`
  counter++;
}
table += "</table>";
table += "</br>";

document.write(table);

// HTML th optional

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

var table = "<table border='1'>";
var counter = 1;
for (let i = 0; i < persons.length; i++) {
  table += `<tr><td>${counter}</td>`;
  for (var key in persons[i]) {
    table += `<td>${(persons[i])[key]}</td>`;
  }
  table += `</tr>`
  counter++;
}
table += "</table>";
table += "</br>";

document.write(table);

// -----------------------------------------------------------------

var table = "<table border='1'>";
var counter = 1;

for (var key in persons[i]) {

}

for (let i = 0; i < persons.length; i++) {
  table += `<tr><td>${counter}</td>`;
  if ('name' in persons[i]) {
    table += `<td>${(persons[i])['name']}</td>`;
  }
  else {
    table += `<td>-</td>`;
  }
  if ('surname' in persons[i]) {
    table += `<td>${(persons[i])['surname']}</td>`;
  }
  else {
    table += `<td>-</td>`;
  }
  if ('fathername' in persons[i]) {
    table += `<td>${(persons[i])['fathername']}</td>`;
  }
  else {
    table += `<td>-</td>`;
  }
  if ('fullName' in persons[i]) {
    table += `<td>${(persons[i])['fullName']}</td>`;
  }
  else {
    table += `<td>-</td>`;
  }

  if ('age' in persons[i]) {
    table += `<td>${(persons[i])['age']}</td>`;
  }
  else {
    table += `<td>-</td>`;
  }
  if ('sex' in persons[i]) {
    table += `<td>${(persons[i])['sex']}</td>`;
  }
  else {
    table += `<td>-</td>`;
  }
  table += `</tr>`
  counter++;
}
table += "</table>";
table += "</br>";

document.write(table);

// destruct array

// напишите код, который используя деструктуризацию положит:
// * четные числа в переменные even1, even2,
// * нечетные в odd1, odd2, odd3,
// * буквы в отдельный массив

var arr = [1, 2, 3, 4, 5, "a", "b", "c"];
var [, even1, , even2] = arr;
var [odd1, , odd2, , odd3] = arr;
var [, , , , , ...chars] = arr;

// destruct string

// Напишите код, который используя деструктуризацию положит:
// * число в переменную number
// * букву a в переменную s1
// * букву b в переменную s2
// * букву c в переменную s3

var arr = [1, "abc"];
var [number] = arr;
var s1 = arr[1][0];
var s2 = arr[1][1];
var s3 = arr[1][2];

// destruct 2

// извлеките используя деструктуризацию имена детей в переменные name1 и name2

var obj = {
  name: 'Ivan',
  surname: 'Petrov',
  children: [{ name: 'Maria' }, { name: 'Nikolay' }]
}

var name1 = obj['children'][0]['name'];
var name2 = obj['children'][1]['name'];

// destruct 3

// извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length

var arr = [1, 2, 3, 4, 5, 6, 7, 10]
var [a] = arr;
var [, b] = arr;
var length = arr.length;