Soit le fichier products.json
{ "products" : [
{ "Name": "Cheese", "Price" : 2.50, "Location": "Refrigerated foods"},
{ "Name": "Crisps", "Price" : 3, "Location": "the Snack isle"},
{ "Name": "Pizza", "Price" : 4, "Location": "Refrigerated foods"},
{ "Name": "Chocolate", "Price" : 1.50, "Location": "the Snack isle"},
{ "Name": "Self-raising flour", "Price" : 1.50, "Location": "Home baking"},
{ "Name": "Ground almonds", "Price" : 3, "Location": "Home baking"}
]}
On peut comparer les écritures :
fetch('products.json')
.then(function(response) {
//console.log(response)
return response.json();
})
.then(function(json) {
let myList = document.querySelector('ul');
myList.innerHTML = `${json.products.map(p => `<li> ${p.Name} </li>`).join('')}`;
});
---------
let myList = document.querySelector('ul');
fetch('products.json')
.then(function(response) {
//console.log(response)
return response.json();
})
.then(function(json) {
let li='';
for (let p of json.products){
li+= `<li><strong> ${p.Name} </strong></li>`
}
myList.innerHTML = li;
});
-------------
let myList = document.querySelector('ul');
fetch('products.json')
.then(function(response) {
//console.log(response)
return response.json();
})
.then(function(json) {
for (let p of json.products){
let li = document.createElement('li');
li.innerHTML = `<strong> ${p.Name} </strong>`
myList.appendChild(li);
}
});