使用jQuery访问嵌套JSON数组中的数据

时间:2019-03-05 07:49:36

标签: jquery json ajax

由于某种原因,我无法访问以下嵌套数组的特定值:

const data = {
  "objects": [
    {
      "id": "id1",
      "code": "code1",
      "props": [
        {
          "foo": [
            {
              "itemId": "theItem",
              "fooDate": "2018-03-01T10:00:00.000Z"
            }
          ]
        }
      ]
    },
    {
      "id": "id2",
      "code": "code2",
      "props": [
        {
          "bar": [
            {
              "itemId": "theItem",
              "barDate": "2018-03-06T22:00:00.000Z"
            }
          ]
        }
      ]
    },
    {
      "id": "id3",
      "code": "code3",
      "props": [
        {
          "foo": [
            {
              "itemId": "someOtherItem",
              "fooDate": "2018-01-23T06:00:00.000Z"
            },
            {
              "itemId": "theItem",
              "fooDate": "2018-03-04T18:00:00.000Z"
            }
          ]
        }
      ]
    }
  ]
};

let latest = null;
let latestDate = null;
for (const item of data.objects) {
    if (Array.isArray(item.props)) {
        for (const prop of item.props) {
            if (prop.foo) {
                for (const {fooDate} of prop.foo) {
                    if (fooDate && (!latestDate || fooDate > latestDate)) {
                        latest = item;
                        latestDate = fooDate;
                    }
                }
            }
        }
    }
}

console.log(latest);

现在,我的最佳猜测是:

[{
    "call_sign": "KTAB-TV",
    "facility_id": "59988",
    "operator": "Nexstar Media Group Inc",
    "programming_class": [{
        "primary": {
            "programming": "CBS",
            "resolution": "1080i",
            "resolution_type": "HD",
            "programming_classifier": "HD1"
        },
        "d_2": {
            "programming": "Telemundo",
            "resolution": "480i",
            "resolution_type": "SD",
            "programming_classifier": "SD1"
        },
        "d_3": {
            "programming": "Escape",
            "resolution": "480i",
            "resolution_type": "SD",
            "programming_classifier": "SD2"
        },
        "d_4": {
            "programming": "ION",
            "resolution": "480i",
            "resolution_type": "SD",
            "programming_classifier": "SD3"
        },
        "d_5": {
            "programming": "None",
            "resolution": "NULL",
            "resolution_type": "N\/A",
            "programming_classifier": "None"
        },
        "d-6": {
            "programming": "None",
            "resolution": "NULL",
            "resolution_type": "N\/A",
            "programming_classifier": "None"
        }
    }]
}]

不幸的是,我仍然得到“未定义”的结果。

此外,如果在json数据数组中的$.ajax({ method: "POST", url: "prep_station_data.php?sid=" + sid, contentType: "application/json; charset=utf-8", dataType: "json", success: function(data) { console.log('success'); for (key in data) { var value = data[key]; console.log(value); } $.getJSON(jsonURL, function(key, value) { var resolutions = ''; $.each(data[0].programming_class, function(key, value) { resolutions += value.resolution; }); $('#primary_programming').append(resolutions); }); }, complete: function() {} }); } 键是一个特定值的情况下,我如何在jquery中创建一个if语句来填充div的问题,我将不胜感激。

感谢您的协助,因为我被困住了。

3 个答案:

答案 0 :(得分:1)

programming_class也是具有单个元素的数组。所以...

data[0].programming_class[0]

这是一个有效的数据处理功能。

$(function() {

    var json = '[{"call_sign":"KTAB-TV","facility_id":"59988","operator":"Nexstar Media Group Inc","programming_class":[{"primary":{"programming":"CBS","resolution":"1080i","resolution_type":"HD","programming_classifier":"HD1"},"d_2":{"programming":"Telemundo","resolution":"480i","resolution_type":"SD","programming_classifier":"SD1"},"d_3":{"programming":"Escape","resolution":"480i","resolution_type":"SD","programming_classifier":"SD2"},"d_4":{"programming":"ION","resolution":"480i","resolution_type":"SD","programming_classifier":"SD3"},"d_5":{"programming":"None","resolution":"NULL","resolution_type":"N/A","programming_classifier":"None"},"d-6":{"programming":"None","resolution":"NULL","resolution_type":"N/A","programming_classifier":"None"}}]}]';

    function handleData(data) {
        var pc = data[0]['programming_class'][0];
        var ret = [];
        for (var i in pc) {
            if (pc.hasOwnProperty(i)) {
                for (var j in pc[i]) {
                    if (pc[i].hasOwnProperty(j)) {
                        if (j == 'resolution') {
                            ret.push(pc[i][j]);
                        }
                    }
                }
            }
        }
        return ret;
    }

    var stuff = handleData(JSON.parse(json));

    $('#content').text(stuff.join(', '));

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

答案 1 :(得分:1)

首先:getJSON的回调不会返回(key, value),它将返回(parseArray, successString) =>,因此您的循环将无法运行。检查下面,可能的解决方案可以是:-

$.getJSON("https://api.jsonbin.io/b/5c7e2d275fe214587796753b", (data) => {
  
  // $.getJSON callback format returns  (data, status)
  // so if you get it as (key, value) you will get (Your JSON Array, "success") 
  // Solution is below
  
  data.forEach((value, key) => {
      if(value.programming_class){
          // programming class is an array in provided JSON
          // you can use static first index as well if it is fixed
          // value = value[0] to avoid  outer loop;
          value.programming_class.forEach((p) => {
              // p is not an array
              let keys = Object.keys(p);
              keys.forEach((k) => {
                  let classObj = p[k];
                  console.log(classObj);
                  // now you can perform actions on this object i-e: sum, multiple whatever
              });
          });
      }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

答案 2 :(得分:-1)

那是因为您忘记添加JSON.parse(), 当您从服务器获取结果时,它以文本或未格式化的json字符串形式返回, 您必须将其通过该函数传递,以使javascript正确呈现。.

所以我们这里有-

 success: function(data) {

        data = JSON.parse(data);

        console.log('success');
        for (key in data) {
            var value = data[key];

    ...

请注意,从Web服务器接收数据时,数据始终是字符串。我希望这会有所帮助。