Я пытаюсь получить данные из файла. 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 Заранее спасибо!