fetch("./xcar6.json")
  .then(function(resp) {
    return resp.json();
  })
  .then(function(data) {
    document.getElementById('allcars').addEventListener('click', allCars);

    var output = '';

    function allCars(){
    for (var i = 0; i < data.xCars.length; i++) {
      output += `
      <h3>${data.xCars[i].model}</h3>
      <li>Name: ${data.xCars[i].name}</li>
      <li>Age: ${data.xCars[i].age}</li>

      <img src="${data.xCars[i].img}" width="200px" height="200px"></img>

      <br>

      <button id="openmodel">Show Model</button>
      `;
    }

    document.getElementById('cars').innerHTML = output;
    }
  });

{
  "xCars": [
    {
      "id": 1,
      "name": "Xcar-1",
      "model": "Cabrio",
      "img": "img/cabrio.jpg",
      "properties": {
        "fuel": "Electric",
        "price": 5000,
        "year": 2016
      }
    },
    {
      "id": 2,
      "name": "Xcar-2",
      "model": "Coupe",
      "img": "img/coupe.jpg",
      "properties": {
        "fuel": "Benzine",
        "price": 7500,
        "year": 2017
      }
    },
    {
      "id": 3,
      "name": "Xcar-3",
      "model": "Hatchback",
      "img": "img/hatchback.png",
      "properties": {
        "fuel": "Diesel",
        "price": 2500,
        "year": 2018
      }
    },
    {
    "id": 4,
    "name": "Xcar-4",
    "model": "SUV",
    "img": "img/SUV.jpg",
    "properties": {
      "fuel": "Electric",
      "price": 10000,
      "year": 2019
    }
    }
  ]
}