fetch !

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);
      }
    });