如何循环此JSON文件并获取数据？

Question

我想追加旅游＆＃34;数据到一个div和＆＃34;自行车＆＃34;数据到另一个div
我还希望在单击事件中获得两种数据结构

[
{
    "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

尝试这是成功回调AJAX调用。

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

旅游和自行车物业的简单forEach可以：

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>