используйте функцию массива .forEach для перебора пользователей и заполнения элемента SELECT UI элементами OPTION - PullRequest
Новая
       32

используйте функцию массива .forEach для перебора пользователей и заполнения элемента SELECT UI элементами OPTION

0 голосов
/ 07 мая 2019
  1. Создание функции стрелки displayUsers.Он должен принимать параметр users
  2. . Он должен использовать функцию array .forEach для перебора пользователей и заполнения элемента SELECT UI элементами OPTION.Каждой ОПЦИИ должно быть присвоено значение идентификатора данного пользователя, а в отображаемом тексте должно быть указано имя пользователя
  3. В нашем приложении мы видим пример пользователя;некий Чарльз Одили из Нигерии!Добавьте новый объект пользователя (например, представляющий себя) в массив пользователей в fetchAndDisplayUsers.Не стесняйтесь не использовать реальные значения данных, но убедитесь, что идентификатор отличается от идентификатора существующего пользователя.

Указанная выше инструкция была дана для достижения моего результата, но мой код ниже в displayUsersКажется, что функция не работает ... Я получаю это сообщение об ошибке "Создайте функцию" displayUsers ", которая перебирает свой параметр и обновляет пользовательский интерфейс. Подробности см. в инструкциях." 

  const users = [];

  const displayUsers = (users) => {
    users.forEach((user) => {
      const option = document.createElement("OPTION");
      const name = document.createTextNode(user.name);
      option.value = user.id;
      option.appendChild(name);
      document.querySelector('select').appendChild(option);
    });
  }

  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Charles Odili',
      id: 'dfhb454768DghtF'
    });

    displayUsers(users);
  };

Примечание:Проблема здесь не в функции fetchAndDisplayUsers, а в функции displayUsers.

1 Ответ

0 голосов
/ 07 мая 2019 

 const users = [];

  const displayUsers = (users) => {
    let sel = document.querySelector('.select-text');
    users.forEach((user) => {
      let opt = document.createElement('option');
      opt.value=users.id;
      opt.innerHTML += user.name
      sel.appendChild(opt);
    });
  }

  const fetchAndDisplayUsers = () => {
    users.push({
      age: 40,
      weight: 75,
      height: 6,
      country: 'Nigeria',
      name: 'Charles Odili',
      id: 'dfhb454768DghtF'
    });

    displayUsers(users);
  }; 

window.onload = function(){
  fetchAndDisplayUsers();  
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <select class="select-text"></select>
</body>
</html>
...