如何循环访问这个JSON文件并获取数据？

Question

我想追加了“旅游”数据到一个DIV和“自行车”到另一个数据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

简单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) => { 
 
\t item.city1.tourism.forEach((tourism) => { 
 
    \t generateImageWrapper(tourism, divTourism); 
 
    }); 
 
    
 
    item.city1.bikes.forEach((bike) => { 
 
    \t 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>

Answer 2

试试这个是成功的回呼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); 
    } 
}