как извлечь данные из. JSON javascript - PullRequest
Новая
       2

как извлечь данные из. JSON javascript

0 голосов
/ 20 марта 2020

Я пытаюсь получить данные из файла. JSON и импортировать их во внутренний HTML, но он продолжает выдавать ошибку, в которой говорится: «data.forEach (функция (пользователь) не является функцией» *

)

мои коды ниже: 

<!DOCTYPE html>
<html>
<head>
    <title>personen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body>
    <button id="button_get_all_persons">get all persons</button><br/><br/>
    <button id="button_get_person">get person</button>id: <input type="text" id="txt_id"/><br/><br/>
    <button id="button_post_person">post</button> name: <input type="text" id="txt_name"/><br/><br/>

    <hr>

    <div id="output"></div>

    <script>

        document.getElementById('button_get_all_persons').addEventListener
        ('click',getUsers);

function getUsers(){
              fetch('persons.json')
              .then((res) => res.json())
              .then((data) =>{
                  let output = '<h2>Users</h2>';
                  data.forEach(function(user){
                      output += `
                        <ul class="list-group mb-3">
                        <li class="list-group-item">ID: ${user.id}</li>
                        <li class="list-group-item">Name: ${user.name}</li>
                        </ul>
                      `;
                  });
                  document.getElementById('output').innerHTML = output;
              }) 
          }
   </script>
</body>
</html>

вот мой. JSON файл 

{
  "persons": [
    {
      "id": 1,
      "name": "jan"
    },
    {
      "id": 2,
      "name": "tim"
    },
    {
      "id": 3,
      "name": "ali"
    },
    {
      "name": "dirk",
      "id": 4
    }
  ]
}

Может кто-нибудь объяснить мне ситуации, пожалуйста, я новичок в JS Заранее спасибо!

1 Ответ

3 голосов
/ 20 марта 2020

forEach - это метод, найденный в массивах .

data - это не массив, это простой объект.

data.persons является массив и имеет forEach метод.

...