【问题标题】:Displaying nested JSON using JQUERY使用 JQUERY 显示嵌套的 JSON
【发布时间】:2016-11-18 15:03:15
【问题描述】:

我目前有一个显示 json 的实时搜索框。但是,我在解决如何显示嵌套 JSON 时遇到问题。

我希望展示图片和“关闭”的日子。任何帮助,将不胜感激。我已经包含了我的 java 脚本和我的 json 示例。

$('#search').keyup(function() {

var searchTerm = $(this).val();
var myExp = new RegExp(searchTerm, "i");

$.get("shops.php",function(data,status){

var response='';
var json = $.parseJSON(data);
shops = json.shops;

    $.each(shops, function(index, item) {
        if(item.shop_name.search(myExp) != -1){
        response += "<h2>"+item.shop_name+"</h2>"; 
    response += "<h2>"+item.distance_citycentre.driving_miles+"</h2>"; 

});

} 

$("#content").html(response);

});
});

这是我的 JSON 示例。

{"shops": [
{ "shop_name":"tesco",
"distance_citycentre": {
"driving_miles":"1.5",
"driving_minutes":"3"
}, 
"closed": [
"monday",
"wedensday",
"friday"
],
"images" [
{
"description":"lake",
"id":"1"
},
{
"description":"ocean",
"id":"2"
}
]
}, 
{"shop_name":"asda", etc.......

【问题讨论】:

  • 如果你在谈论如何访问数组中的json对象,你可以使用array[0].object.array[0].object.array[ 0].array[0]
  • 检查你的json输出是否正确,因为我在json代码中发现了“image”错误附近的错误,它需要冒号-“:”

标签: javascript jquery json client livesearch


【解决方案1】:

这是你的解决方案

$(document).ready(function() {

var data = '{ "shops":[{"closed":["monday","wedensday","friday"],"images" :[{"description":"lake","id":"1"},{"description":"ocean","id":"2"}]}]}';

var response='';
var json = $.parseJSON(data);
shops = json.shops;

alert(shops[0].closed[0] + " - "+shops[0].closed[1] + " - " +shops[0].closed[2]);

alert(shops[0].images[0].description + " - "+shops[0].images[0].id);


});

如果可能的话更改JSON输出,“图像”附近有一个小错误“:”你可以在[JSfiddle]上找到相同的工作模型[1 ]

[1]:https://jsfiddle.net/u6exgn7s/ 此处

【讨论】:

    【解决方案2】:

    如果您正在谈论如何访问数组中的json对象,您可以使用array[0].object.array[0].object.array[0].array[0]访问它们

    在您的示例中,您可以使用以下命令选择关闭日“星期一”:

    item.shops[0].closed[0]; 
    

    或星期五使用:

    item.shops[0].closed[2];
    

    您通过[-number from 0 to infinity-]确定数组中的位置

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-08-03
      • 2017-10-27
      • 1970-01-01
      • 2019-07-28
      • 1970-01-01
      • 2015-12-21
      • 1970-01-01
      相关资源
      最近更新 更多