homework/js06/script3.js

// Form
// Напишите код, который их любого объекта создает форму HTML. Например для такого объекта
// На экране должна появиться форма из 7 строк, с названиями полей, взятыми из ключей и полями ввода
// соответствующих типов. Значениями полей ввода должны быть значения из объекта.
form: {
  const car = {
    "Name": "chevrolet chevelle malibu",
    "Cylinders": 8,
    "Displacement": 307,
    "Horsepower": 130,
    "Weight_in_lbs": 3504,
    "Origin": "USA",
    "in_production": false
  }
  let string = "<form style='display: flex; flex-direction: column;'>";
  for (let value of Object.keys(car)) {
    let type;
    if (typeof (car[value]) == 'number') {
      type = 'number';
    } else if (typeof (car[value]) == 'string') {
      type = 'text';
    } else if (typeof (car[value]) == 'boolean') {
      type = 'checkbox';
    }
    string += `<label style='margin-bottom: 16px;'>
    ${value.slice(0, 1).toUpperCase() + value.slice(1).toLowerCase().replaceAll("_", " ")}
    <input type ="${type}" value="${car[value]}"/>
    </label>`;
  }
  string += "</form>";
  document.write(string);
}

// Table
// Дан любой массив с объектами
// Сформировать таблицу (используя накопление тэгов HTML в строке):
// Алгоритм решения
// Перед непосредственно формированием строк таблицы надо знать все колонки. Для этого нужно предварительно
// перебрать все объекты и извлечь из них все ключи, что бы сформировать общее множество ключей.
// Первый проход - поиск колонок
// Перебираем массив объектов, перебираем ключи каждого объекта и добавляем в массив колонок, если этого ключа
// еще там нет. Для примера выше массив получится в шесть элементов. На этом этапе строку HTML создавать еще рано.
// Заголовок
// Начинаем создание таблицы. Используя массив колонок формируем одну строку таблицы с заголовками
// Второй проход - отображение таблицы
// Перебираем массив объектов, перебираем массив колонок для каждого объекта, и используем название колонки как
// ключ
table: {
  const persons = [
    {
      name: 'Мария',
      fatherName: 'Ивановна',
      surname: 'Иванова',
      sex: 'female'
    },
    {
      name: 'Николай',
      fatherName: 'Иванович',
      surname: 'Иванов',
      age: 15
    },
    {
      name: 'Петр',
      fatherName: 'Иванович',
      surname: 'Иванов',
      married: true
    },
  ]
  let ColumnArr = [];
  for (let person of persons) {
    for (let key of Object.keys(person)) {
      if (!ColumnArr.includes(key)) {
        ColumnArr.push(key);
      }
    }
  }
  let str = "<table style = 'border-collapse: collapse; border: 1px solid gray; text-align: center;'><tr>";
  for (ColumnName of ColumnArr) {
    str += `<th style = 'border-collapse: collapse; border: 1px solid gray; background-color: #d3d3d3; padding: 10px'>${ColumnName}</th>`;
  }
  str += "</tr>";
  for (let person of persons) {
    str += "<tr>";
    for (let ColumnName of ColumnArr) {

      str += `<td style = 'border-collapse: collapse; border: 1px solid gray; padding: 10px'>${person[ColumnName] || ''}</td>`;
    }
    str += "</tr>";
  }
  str += "</table>"
  document.write(str);
}