如何在 javascript 中访问 JSON 对象？答案

【问题标题】：How to access JSON object in javascript?如何在 javascript 中访问 JSON 对象？
【发布时间】：2022-07-06 21:56:49
【问题描述】：

我想选择 "artist" 并将其放入选择器中，我想将其保留在 vannila javascript 中。

我认为这会从我的 JSON 文件中选择艺术家。

option.text = data[i].artist;

我的 JSON

{
  "Albums": {
    "Krezip": [
      {
        "artist":"Krezip",
        "title":"Days like this",
      }
    ],
    "Cure": [
      {
        "artist":"The Cure",
        "title":"Wish",
      }
    ]
  }
}

还有我的 javascript

const data = JSON.parse(request.responseText);
    let option;
    for (let i = 0; i < data.length; i++) {
        option = document.createElement('option');
        option.text = data[i].artist;
        dropdown.add(option);
    }

【问题讨论】：

你能给出一个更详细的 JSON，每个数组有多个条目，然后添加那个示例的预期输出吗？

标签： javascript json

【解决方案1】：

您首先需要定位 Albums.Krezip，然后像以前一样遍历 Krezip 以访问艺术家字段。

如果你的变量数据和你发布的Json一样。

应该是：data.Albums.Krezip[i].artist

【讨论】：

我已经更新了 JSON sn-p，因为我认为这不适用于我所拥有的

【解决方案2】：

你的 json

const json = {
  "Albums": {
    "Krezip": [
      {
        "artist":"Krezip",
        "title":"Days like this",
      }
     ]
  }
}

for循环内部

const albums = json.Albums // this is an array of albums

for(let key of Object.keys(albums)){
    const album = albums[key]
    // If this is an array then you might need to loop through them
    console.log(album[0])
}

【讨论】：

我已经更新了 JSON sn-p，因为我认为这不适用于我所拥有的

【解决方案3】：

替换：

const data = JSON.parse(request.responseText);

与：

const data = Object.values(JSON.parse(request.responseText).Albums)
                   .map(arr => arr[0]);

const request = { responseText: '{"Albums":{"Krezip":[{"artist":"Krezip","title":"Days like this"}],"Cure":[{"artist":"The Cure","title":"Wish"}]}}' };

const data = Object.values(JSON.parse(request.responseText).Albums)
                   .map(arr => arr[0]);
let option;
for (let i = 0; i < data.length; i++) {
    option = document.createElement('option');
    option.text = data[i].artist;
    dropdown.add(option);
}

&lt;select id="dropdown"&gt;&lt;/select&gt;

【讨论】：

【解决方案4】：

您的循环不起作用，因为您解析的数据是一个没有length 属性的对象。您可以做的是找到每个专辑的 Object.entries，解构艺术家姓名（键）和专辑列表（值），然后使用该信息更新您的下拉列表。

这是一个使用现有 select 元素的工作示例（因为我不知道 dropdown 做了什么）。它会在每次迭代中记录artist, album，以便您了解entries 的工作原理。

const select = document.querySelector('select');

const json = '{"Albums": {"Krezip": [{"artist":"Krezip","title":"Days like this"}],"Cure": [{"artist":"The Cure","title":"Wish"}]}}';

const data = JSON.parse(json);

// `Object.entries` returns an array of key/value pairs
const entries = Object.entries(data.Albums);

// We can destructure the key/value pairing and call
// them something more meaningful. Then just use that data
// to create the options
for (const [artist, albums] of entries) {
  const option = document.createElement('option');
  option.textContent = artist;
  option.value = artist;
  select.appendChild(option);
  console.log(JSON.stringify([artist, albums]));
  // dropdown.add(option);
}

<select>
  <option disabled selected>Choose an artist</option>
</select>

【讨论】：