如何循環訪問這個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); 
    } 
}