从对象读取数据时遇到问题答案

【问题标题】：Having trouble reading data from an object从对象读取数据时遇到问题
【发布时间】：2022-11-10 12:25:50
【问题描述】：

我不明白如何阅读流派数据。

"data":
  "genres": [
    {
      "id": 0,
      "type": "string",
      "name": "string",
      "url": "string"
    },
    {
      "id": 1,
      "type": "string",
      "name": "string",
      "url": "string"
    }
  ],
}

我希望它最终显示为 name1, name2, name3 并且（如果可能）我希望每个名称都有指向其相应网址的链接。

我试图通过

var genres = data.genres;

但这只会返回[object Object],[object Object] 我猜你必须从这些对象中读取数据，但我不知道该怎么做。

【问题讨论】：

标签： javascript arrays javascript-objects

【解决方案1】：

您需要从中了解以下内容：“数据”是一个对象，它有一个“流派”属性，其中包含一个对象数组。知道这一点，您可以执行以下操作：

const name1 = data.genres[0].name; // Gets the first name
const name2 = data.genres[1].name; // Gets the second name

如果要遍历流派数据，则需要遍历“流派”属性中的对象：

data.genres.map((genre) => console.log(genre.name)); // Logs all names

这将是一个更常见的例子：

for (let i = 0; i < data.genres.length; i++) {
    const name = data.genres[i].name;
    console.log(name); // Logging the names
}

【讨论】：

我可以将data.genres.map((genre) => console.log(genre.name)); 的输出放入字符串中吗？例如。 name1, name2, name3
当然可以。查找如何在 JS 中连接字符串数组（带分隔符）。 data.genres.map((genre) => genre.name) 将返回一个名称数组，例如 ['John', 'Joe']

【解决方案2】：

您必须循环遍历数据，并创建 a 元素来创建链接。您还需要一个父元素来将链接附加到：

const yourParentElement = document.getElementById("parent");
var genres = data.genres;
genres.forEach(genre => { 
    var lnkGenre = document.createElement("a"); 
    lnkGenre.textContent = genre.name;
    lnkGenre.href = genre.url;

您还可以在此处添加类或 id：

    lnkGenre.classList.add("yourClass");
    lnkGenre.id = genre.id;
    yourParentElement.appendChild(lnkGenre);
});

【讨论】：