如何遍历此 JSON 文件并获取数据？

Question

I want to append the "tourism" data to one div and the "bikes" data to another div
I also want to get both data structures on a single click event

[
{
    "city1" : {
        //this is the first data that should be appended to one div
        "tourism" : [{
            "objectId":"1a1",
            "objectTitle":"title_text",
            "objectUrl_image":"http://",
            "object_textContent":"text_content"
        },
        {
            "objectId":"1a2",
            "objectTitle":"title_text",
            "objectUrl_image":"http://",
            "object_textContent":"text_content"
        }],
       //this is another data that should be appended to another div
        "bikes" : [{
            "objectId":"1b1",
            "objectTitle":"title_text",
            "objectUrl_image":"http://",
            "object_textContent":"text_content"
        },
        {
            "objectId":"1b2",
            "objectTitle":"title_text",
            "objectUrl_image":"http://",
            "object_textContent":"text_content"
        }]
    }
}
]

Answer 1

Try this is in success call back of AJAX call.

success: function(result) {
var tourism=JSON.parse(result.city.tourism);
var bikes =JSON.parse(result.city. bikes);
var tourismLen=tourism.length;
  for(var i=0;i<=tourismLen;i++) {
       console.log(tourismLen[i].objectTitle);
   }
}

Answer 2

A simple forEach for the tourism and bikes properties would do:

 const data = [{ "city1": { //this is the first data that should be appended to one div "tourism": [{ "objectId": "1a1", "objectTitle": "title_text", "objectUrl_image": "http://", "object_textContent": "text_content" }, { "objectId": "1a2", "objectTitle": "title_text", "objectUrl_image": "http://", "object_textContent": "text_content" }], //this is another data that should be appended to another div "bikes": [{ "objectId": "1b1", "objectTitle": "title_text", "objectUrl_image": "http://", "object_textContent": "text_content" }, { "objectId": "1b2", "objectTitle": "title_text", "objectUrl_image": "http://", "object_textContent": "text_content" }] } }]; const divTourism = document.getElementById('tourism'); const divBikes = document.getElementById('bikes'); const generateImageWrapper = function (item, container) { const imageWrapper = container.appendChild(document.createElement('div')); const image = imageWrapper.appendChild(document.createElement('img')); const text = imageWrapper.appendChild(document.createElement('p')); image.title = item.objectTitle; image.src = item.objectUrl_image; text.appendChild(document.createTextNode(item.object_textContent)); imageWrapper.classList.add('image-wrapper'); }; data.forEach((item) => { item.city1.tourism.forEach((tourism) => { generateImageWrapper(tourism, divTourism); }); item.city1.bikes.forEach((bike) => { generateImageWrapper(bike, divBikes); }); });

 .image-wrapper { display: inline-block; padding: 10px; text-align: center; } .image-wrapper img { background: #eee; height: 100px; width: 100px; }

 <div id="tourism"> <h1> Tourism </h1> </div> <div id="bikes"> <h1> Bikes </h1> </div>