Kаждый элемент массива json в отдельный div

166
06 апреля 2018, 14:47

Здравствуйте,

Подскажите, я хочу отобразить данные json массива через html в <ol> листе, отобразить получается, но задача в том чтобы каждый элемент массива отображался в отдельном div боксе. У меня в div попадают сразу все элементы, как это исправить? 

    <!DOCTYPE html>
<html>
<head>
    <title>AJAX JSON CAR SALES</title>
    <style>
    #logo{
    display:block;
    height:25em;
    width:27em;
    margin:auto;
    }
    #empData{
    border:2px solid black;
    }
    #empData img{
    height:15em;
    width:22em;
    }
    .cars{
    border:2px solid black;
    display:inline-block;
    }   
    ol{
    margin-left:5em;
    }
    </style>
    <script>
        function getCars(){
            var ajaxRequest = new XMLHttpRequest();
            ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                    //the request is completed, now check its status
                    if(ajaxRequest.status == 200){
                        var jsonObj = JSON.parse(ajaxRequest.responseText);
                        console.log(jsonObj)
                        var carsArray = jsonObj.carsList;

                        var tabData = "<div class='cars'><ol>";
                        for(var i = 0;i < carsArray.length; i++){
                        tabData = tabData +("<li>" + 
                        carsArray[i].Make + 
                        "</li><li>" + 
                        carsArray[i].Model+ 
                        "</li><li>" + 
                        carsArray[i].Fuel_Type + 
                        "</li><li>" + 
                        carsArray[i].Color+
                        "</li><li>" + 
                        carsArray[i].Price+
                        "</li><li>" + 
                        "<img src='"+carsArray[i].pic+"' alt='Car'>"+
                        "</li>");
                        }
                        tabData = tabData + "</ol></div>";
                        document.getElementById("empData").innerHTML =tabData;


                    }
                    else{
                        console.log("Status error: " + ajaxRequest.status);
                    }
                }
                else{
                    console.log("Ignored readyState: " + ajaxRequest.readyState);
                }
            }
            ajaxRequest.open('GET', 'cars.json');
            ajaxRequest.send();
        }
    </script>   
</head>
<body onload="getCars()">
    <img src="images/logo.jpg" id="logo" alt="Logo">
    <div id="empData">  
    </div>
</body>
</html>

Вот сам массив:

{"carsList": [
    {"Make":"Toyota","Model":"Corolla","Year":"2015","Fuel_Type":"Petrol","Color":"White","Price":"€30000","pic":"images/toyota.jpg"},
    {"Make":"Ford","Model":"Fiesta","Year":"2005","Fuel_Type":"Petrol","Color":"Red","Price":"€5000","pic":"images/ford.jpg"},
    {"Make":"Nissan","Model":"Qashqai","Year":"2017","Fuel_Type":"Diesel","Color":"Silver","Price":"€45000","pic":"images/nissan.jpg"},
    {"Make":"BMW","Model":"5 series","Year":"2012","Fuel_Type":"Diesel","Color":"Silver","Price":"€40000","pic":"images/bmw.jpg"},
    {"Make":"Mazda","Model":"3","Year":"2002","Fuel_Type":"Diesel","Color":"Grey","Price":"€3000","pic":"images/mazda.jpg"},
    {"Make":"Mercedes","Model":"E200","Year":"2009","Fuel_Type":"Diesel","Color":"Light Grey","Price":"€18000","pic":"images/mercedes.jpg"},
    {"Make":"Volkswagen","Model":"Passat","Year":"2005","Fuel_Type":"Petrol","Color":"Black","Price":"€4000","pic":"images/passat.jpg"},
    {"Make":"Audi","Model":"A6","Year":"2007","Fuel_Type":"Diesel","Color":"Black","Price":"€7000","pic":"images/audi.jpg"},
    {"Make":"KIA","Model":"Rio", "Year":"2017","Fuel_Type":"Petrol","Color":"Red","Price":"€48000","pic":"images/kia.jpg"},
    {"Make":"Hyundai","Model":"Santa Fe", "Year":"2006","Fuel_Type":"Diesel","Color":"Silver","Price":"€6800","pic":"images/hyundai.jpg"},
    {"Make":"Alfa Romeo","Model":"Giulietta", "Year":"2009","Fuel_Type":"Petrol","Color":"Red","Price":"€2500","pic":"images/alfa_romeo.jpg"},
    {"Make":"Bentley","Model":"Continental", "Year":"2014","Fuel_Type":"Petrol","Color":"White","Price":"€90000","pic":"images/bentley.jpg"},
    {"Make":"Cadillac","Model":"Seville", "Year":"1996","Fuel_Type":"Petrol","Color":"Black","Price":"€20000","pic":"images/cadillac.jpg"},
    {"Make":"Chevrolet","Model":"Camaro", "Year":"2010","Fuel_Type":"Petrol","Color":"Silver","Price":"€30000","pic":"images/chevrolet.jpg"},
    {"Make":"Chrysler","Model":"300 MY12", "Year":"2015","Fuel_Type":"Diesel","Color":"Black","Price":"€58000","pic":"images/chrysler.jpg"},
    {"Make":"Daewoo","Model":"Lanos", "Year":"2002","Fuel_Type":"Petrol","Color":"White","Price":"€1500","pic":"images/daewoo.jpg"},
    {"Make":"Fiat","Model":"Ducato", "Year":"2004","Fuel_Type":"Diesel","Color":"White","Price":"€1900","pic":"images/fiat.jpg"},
    {"Make":"Hummer","Model":"H3", "Year":"2007","Fuel_Type":"Petrol","Color":"Orange","Price":"€55000","pic":"images/hummer.jpg"},
    {"Make":"Skoda","Model":"Octavia", "Year":"2009","Fuel_Type":"Diesel","Color":"Red","Price":"€15000","pic":"images/skoda.jpg"},
    {"Make":"Dodge","Model":"Ram", "Year":"2011","Fuel_Type":"Petrol","Color":"Black","Price":"€38000","pic":"images/dodge.jpg"}
]}
Answer 1

/* 
if(ajaxRequest.status == 200) { 
*/ 
  let jsonObj = getTestJson(); //JSON.parse(ajaxRequest.responseText); 
  let carsArray = jsonObj.carsList,  
      itemsHtml = ''; 
  carsArray.forEach(car => { 
    itemsHtml += `\n 
      <li><div> 
        <h4>${car.Make} ${car.Model}</h4> 
        Топливо: ${car.Fuel_Type}<br> 
        Цвет: ${car.Color}<br> 
        Стоимость: ${car.Price} 
        <img arc="${car.pic}" alt="Car"> 
      </div></li>`;  
  });  
  document.getElementById('empData').innerHTML = `<div class="cars"><ol>${itemsHtml}</ol></div>`; 
/* 
} 
else 
  console.log("Status error: " + ajaxRequest.status); 
*/ 
 
 
function getTestJson() { 
  return {"carsList": [ 
    {"Make":"Toyota","Model":"Corolla","Year":"2015","Fuel_Type":"Petrol","Color":"White","Price":"€30000","pic":"images/toyota.jpg"}, 
    {"Make":"Ford","Model":"Fiesta","Year":"2005","Fuel_Type":"Petrol","Color":"Red","Price":"€5000","pic":"images/ford.jpg"}, 
    {"Make":"Nissan","Model":"Qashqai","Year":"2017","Fuel_Type":"Diesel","Color":"Silver","Price":"€45000","pic":"images/nissan.jpg"}, 
    {"Make":"BMW","Model":"5 series","Year":"2012","Fuel_Type":"Diesel","Color":"Silver","Price":"€40000","pic":"images/bmw.jpg"}, 
    {"Make":"Mazda","Model":"3","Year":"2002","Fuel_Type":"Diesel","Color":"Grey","Price":"€3000","pic":"images/mazda.jpg"}, 
    {"Make":"Mercedes","Model":"E200","Year":"2009","Fuel_Type":"Diesel","Color":"Light Grey","Price":"€18000","pic":"images/mercedes.jpg"}, 
    {"Make":"Volkswagen","Model":"Passat","Year":"2005","Fuel_Type":"Petrol","Color":"Black","Price":"€4000","pic":"images/passat.jpg"}, 
    {"Make":"Audi","Model":"A6","Year":"2007","Fuel_Type":"Diesel","Color":"Black","Price":"€7000","pic":"images/audi.jpg"}, 
    {"Make":"KIA","Model":"Rio", "Year":"2017","Fuel_Type":"Petrol","Color":"Red","Price":"€48000","pic":"images/kia.jpg"}, 
    {"Make":"Hyundai","Model":"Santa Fe", "Year":"2006","Fuel_Type":"Diesel","Color":"Silver","Price":"€6800","pic":"images/hyundai.jpg"}, 
    {"Make":"Alfa Romeo","Model":"Giulietta", "Year":"2009","Fuel_Type":"Petrol","Color":"Red","Price":"€2500","pic":"images/alfa_romeo.jpg"}, 
    {"Make":"Bentley","Model":"Continental", "Year":"2014","Fuel_Type":"Petrol","Color":"White","Price":"€90000","pic":"images/bentley.jpg"}, 
    {"Make":"Cadillac","Model":"Seville", "Year":"1996","Fuel_Type":"Petrol","Color":"Black","Price":"€20000","pic":"images/cadillac.jpg"}, 
    {"Make":"Chevrolet","Model":"Camaro", "Year":"2010","Fuel_Type":"Petrol","Color":"Silver","Price":"€30000","pic":"images/chevrolet.jpg"}, 
    {"Make":"Chrysler","Model":"300 MY12", "Year":"2015","Fuel_Type":"Diesel","Color":"Black","Price":"€58000","pic":"images/chrysler.jpg"}, 
    {"Make":"Daewoo","Model":"Lanos", "Year":"2002","Fuel_Type":"Petrol","Color":"White","Price":"€1500","pic":"images/daewoo.jpg"}, 
    {"Make":"Fiat","Model":"Ducato", "Year":"2004","Fuel_Type":"Diesel","Color":"White","Price":"€1900","pic":"images/fiat.jpg"}, 
    {"Make":"Hummer","Model":"H3", "Year":"2007","Fuel_Type":"Petrol","Color":"Orange","Price":"€55000","pic":"images/hummer.jpg"}, 
    {"Make":"Skoda","Model":"Octavia", "Year":"2009","Fuel_Type":"Diesel","Color":"Red","Price":"€15000","pic":"images/skoda.jpg"}, 
    {"Make":"Dodge","Model":"Ram", "Year":"2011","Fuel_Type":"Petrol","Color":"Black","Price":"€38000","pic":"images/dodge.jpg"} 
  ]};  
}
body { 
  background-color: #777;  
  font: 16px Arial, sans-serif; 
} 
 
#empData { 
  width: 27em;  
  margin: 30px auto; padding: 20px 10px;  
  background-color: #fff;  
} 
 
#empData li:not(:last-child):after { 
  content: '';  
  display: block;  
  width: calc(100% - 42px);  
  margin: 50px 0;  
  border-bottom: 1px solid #ccc;  
} 
 
#empData h4 { 
  margin-bottom: 0.3em;  
  font-family: monospace;  
} 
 
#empData img { 
  display: block;  
  width: 22em; height: 15em;  
  margin-top: 1em;  
  background-color: #eee;  
}
<div id="empData"></div>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте beauty-health.com.ua
ТОП-10
READ ALSO
Как работает history api + ajax
HTML

Как работает history api + ajax

Здравствуйте! Хочу научится использовать history apiУмею отправлять простые ajax запросы, но не могу понять как взаимодействует ajax c history api

 190
Как отменить вывод ошибки в консоль, если не найдено изображение?
HTML

Как отменить вывод ошибки в консоль, если не найдено изображение?

Такой код выводит ошибку в консоль: Если он не нашел картинку то подменяет её на другуюОднако выводит сообщение об ошибке (404 (Not Found))

 199
span создает пробел
HTML

span создает пробел

 174
Почему не подключается плагин slick
HTML

Почему не подключается плагин slick

Почему не подключается плагин? В чем проблема? Использую вот этот плагин - http://kenwheelergithub

 163