Question

Напишите функцию, которая создает на странице список на основе объекта JS. Текст для элементов списка нужно взять из ключа text. Если у пункта свойство done = true, у элемента списка с этим пунктом должен появиться класс done. Пункт должен окраситься зеленым цветом и зачеркнуться. Объект здесь.

Answer 1

Ответ:

let arr = [

   {

       value: "Значение1",

       label: "Значение 1",

   },

   {

       value: "Значение2",

       label: "Значение 2",

   },

   {

       value: "Значение3",

       label: "Значение 3",

   },

   {

       value: "Значение4",

       label: "Значение 4",

   },

   {

       value: "Значение5",

       label: "Значение 5",

   },

];

/**

* Создать выпадающий список на веб-странице (HTML select)

* @param {{value:string, label:string}[]} arr Массив объектов

* @param {string} str value выбранного по умолчанию элемента.

* Если переданное значение не найдено в массиве элементов, то нужно выбрать 0-й элемент.

* @returns {HTMLSelectElement} Объект HTMLSelectElement

*/

function createSelect(arr, str) {

   let select = document.createElement("select");

   if (Array.isArray(arr)) {

       if (typeof arr[0] === "number" || typeof arr[0] === "string")

           for (let value of arr) {

               let isSelected = str === value;

               let option = new Option(value, value, isSelected, isSelected);

               select.options.add(option);

           }

       else

           for (let e of arr) {

               let value = e.value;

               let isSelected = str === value;

               let option = new Option(e.label, value, isSelected, isSelected);

               select.options.add(option);

           }

   }

   else {

       for (let e of Object.entries(arr)) {

           let value = e[0];

           let isSelected = str === value;

           let option = new Option(e[1], value, isSelected, isSelected);

           select.options.add(option);

       }

   }

   return select;

}

//document.body.append(createSelect(arr, "Значение4"));

document.body.append(createSelect(arr));

let arr2 = [1, "value2", "value3", 4, 5];

document.body.append(createSelect(arr2));

let obj = {

   value1: 'Значение 1',

   value2: 'Значение 2',

   value3: 'Значение 3', value4: 'Значение 4',

   value5: 'Значение 5'

};

document.body.append(createSelect(obj));

Объяснение:

Answer 2

Вот пример функции на JavaScript, которая создает список на основе объекта и применяет стили к элементам списка в зависимости от значения свойства "done":

function createListFromObject(obj) {
  // Получаем элемент списка, в котором будем создавать элементы
  var listElement = document.getElementById("myList");

// Проходимся по каждому ключу в объекте
  for (var key in obj) {
    // Создаем новый элемент списка
    var listItem = document.createElement("li");

// Устанавливаем текст элемента списка из свойства "text" объекта
    listItem.textContent = obj[key].text;

// Проверяем, есть ли свойство "done" и его значение равно true
    if (obj[key].done === true) {
      // Добавляем класс "done" к элементу списка
      listItem.classList.add("done");

// Применяем стили к элементу списка
      listItem.style.color = "green";
      listItem.style.textDecoration = "line-through";
    }

// Добавляем элемент списка в родительский элемент
    listElement.appendChild(listItem);
  }
}

Пример использования функции с объектом из вашего вопроса:

var myObject = {
  item1: { text: "Task 1", done: true },
  item2: { text: "Task 2", done: false },
  item3: { text: "Task 3", done: true },
};

createListFromObject(myObject);

В этом примере функция `createListFromObject` принимает объект `myObject` и создает список на странице на основе его содержимого. Если у элемента списка свойство `done` равно `true`, то элемент списка будет иметь класс `done`, окрашиваться в зеленый цвет и зачеркиваться.

Примечание: Для работы функции необходимо наличие элемента списка с id "myList" на странице, в который будут добавляться элементы списка.

Надеюсь, это поможет! Если у вас возникнут еще вопросы, не стесняйтесь задавать.