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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想追加了“旅游”数据到一个DIV和“自行车”到另一个数据DIV
我也想要得到一个单一的点击事件两种数据结构如何循环访问这个JSON文件并获取数据？

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

回答：

简单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>

回答：

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

以上是 如何循环访问这个JSON文件并获取数据？ 的全部内容， 来源链接： utcz.com/qa/262328.html

回到顶部