如何通过更改数组中的属性访问 json 数据。 JS-jQuery答案

【问题标题】：How do I access json data with changing property from the array. JS-Jquery如何通过更改数组中的属性访问 json 数据。 JS-jQuery
【发布时间】：2023-04-10 18:01:01
【问题描述】：

如果这很简单，请接受我的预先道歉。我刚开始学习js。

我正在构建一个学校项目并使用假期 API。仅使用国家和年份时，我得到的 JSON 数据如下所示。

我的问题是，由于粗体日期会根据国家和年份的搜索参数而变化，我不知道如何访问它们以在我的页面上显示它们。

JSON DATA1

"status": 200,
    "holidays": {
        **"2016-01-01":** [{
            "name": "Last Day of Kwanzaa",
            "date": "2016-01-01",
            "observed": "2016-01-01",
            "public": false
        }, {
            "name": "New Year's Day",
            "date": "2016-01-01",
            "observed": "2016-01-01",
            "public": true
        }],

我将此保存为 json 文件以用于我的测试。下面是我用来尝试访问上面的 json 数据的代码。

const $list = $(`<ul>`);
$("#output").append($list)
$.getJSON(url, function (data) {
    const holiday = data.holidays;

    if (data.holidays.hasOwnProperty ('name'));
        console.log('name' in data.holidays);

    if (data.cod == 200) {
        $list.html("Success");
    }
    data.holidays.forEach((item) => {
        $list.append(`<tr><td><li style="font-weight: bold">Holiday: ${item.name}</li><li>Date: ${item.date}</li><li>Date observed: ${item.observed}</li></td></tr>`);    
    });

如果我的参数包括国家、年份和月份，则上面的代码有效，因为来自该调用的数据如下所示。

JSON DATA2

"holidays": [{
        "name": "Pearl Harbor Remembrance Day",
        "date": "2016-12-07",
        "observed": "2016-12-07",
        "public": false
    }, {
        "name": "Immaculate Conception of the Virgin Mary",
        "date": "2016-12-08",
        "observed": "2016-12-08",
        "public": false
    },

我希望能够将我的 JSON DATA1 显示到我的 html 中。当日期属性不是静态的，如名称、日期、观察和公开时，我该怎么做？

以下是我使用当前代码时遇到的错误：

script.js:125 Uncaught TypeError: data.holidays.forEach 不是函数在 Object.success (script.js:125) 在我 (jquery-3.2.1.min.js:2) 在 Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2) 在 A (jquery-3.2.1.min.js:4) 在 XMLHttpRequest。 (jquery-3.2.1.min.js:4)

【问题讨论】：

标签： javascript jquery arrays json api

【解决方案1】：

在这种情况下，您不能只使用forEach，因为holidays 不是一个数组，而是一个以日期为属性的标准对象。您必须使用的循环类型是for...in。它允许您遍历对象的可枚举属性。

例如：

for (holiday in data.holidays) {
  data.holidays[holiday].forEach((item) => {
    $list.append(`<tr><td>` +
      `<li style="font-weight: bold">Holiday: ${item.name}</li>` +
      `<li>Date: ${item.date}</li>` +
      `<li>Date observed: ${item.observed}</li>` +
      `</td></tr>`);
  }
});

我没有在浏览器中测试过上面的代码，只在Node中使用了console.logs。

【讨论】：