如何在javascript访问JSON对象?

Question

我想选择"artist"并把它放在选择器中，我想把它保存在vanila javascript中。

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

option.text = data[i].artist;

我的JSON

{
"Albums": {
"Krezip": [
{
"artist":"Krezip",
"title":"Days like this",
"tracks": [
{
"title":"Lost without you",
"src":"https://www.youtube.com/embed/zazrmePIL9Y",
"dur":"3:35"
},
{
"title":"I would stay",
"src":"https://www.youtube.com/embed/kfrGFGHU6YA",
"dur":"4:04"
}
]
}
],
"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);
}

Answer 1

你的循环不会工作，因为你解析的数据是一个没有length属性的对象。

如果你只是想要艺术家的名字填充下拉菜单，使用Object.keys来获得艺术家的名字数组和迭代它。您可以像示例中那样使用循环，或者for…正如我在这里所做的那样-一个使用现有select元素的工作示例(因为我不知道dropdown做什么)。

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.keys` returns an array of artists
const artists = Object.keys(data.Albums);
for (const artist of artists) {
const option = document.createElement('option');
option.textContent = artist;
option.value = artist;
select.appendChild(option);
}

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

或者，如果您希望艺人名称和在循环中提供专辑信息，请使用Object.entries。解构艺术家名称(键)和专辑列表(值)，并使用artist更新下拉列表。然后，如果您愿意，还可以对专辑数组执行其他操作。

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]));
}

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

Answer 2

首先需要以Albums为目标。然后像以前一样迭代Krezip来访问艺术家字段。

如果您的变量数据与您发布的Json相同。

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

Answer 3

你的json

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

inside for loop

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])
}

Answer 4

Replace:

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);
}

<select id="dropdown"></select>

Answer 5

try this

for (const prop in data.Albums) {
let item = data.Albums[prop];
for (let i = 0; i < item.length; i++) {
option = document.createElement("option");
option.text = item[i].artist;
dropdown.add(option);
}
}