<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>JSON Sample</title>
</head>
<body>
<h2>Текст</h2>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$.getJSON('data.json', function(data) {
var output="<ul>";
for (var i in data.users) {
output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + "--" + data.users[i].joined.month+"</li>";
}
output+="</ul>";
document.getElementById("placeholder").innerHTML=output;
});
</script>
</body>
</html>{"users":[
{
"firstName":"Ray",
"lastName":"Villalobos",
"joined": {
"month":"January",
"day":12,
"year":2012
}
},
{
"firstName":"John",
"lastName":"Jones",
"joined": {
"month":"April",
"day":28,
"year":2010
}
}
]}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>JSON Sample</title>
</head>
<body>
<h2>Текст</h2>
<div id="placeholder"></div>
<script>
document.addEventListener(
'DOMContentLoaded',
() => {
fetch('data.json')
.then((response) => response.json())
.then((data) => {
document.getElementById("placeholder").innerHTML =
`<ul>${data.users.map((u) => `<li>${u.firstName} ${u.lastName} -- ${u.joined.month}</li>`).join()}</ul>`
});
},
);
</script>
</body>
</html>