访问从 API 获取的特定数组对象的值 - javascript

Question

我提出了类似的问题，但这并没有解决我的问题。我有一个使用 fetch() 从 API 获取的对象。 当我 console.log() 获取数据时，我得到以下示例：

let fetchData = {
  type: "string",
  id: 123,
  included: [
    {
      type: "wanted-type",
      attributes: { stats: { name: "name1" } }
    }, {
      type: "not-wanted-type",
      id: 111
    }, {
      type: "wanted-type",
      attributes: { stats: { name: "name2" } }
    }]
}

首先，我尝试像这样访问所需的值“fetchData.included.find(value => value.attributes.stats.name ===“name1)”，但后来我意识到并非数组中的所有对象都有“attributes”键。所以我使用过滤器方法将所有类型为“wanted-type”的对象收集到另一个数组中，然后我成功了。它看起来像这样：

let arrayFetch = fetchData.included;
let array = [];
const result = arrayFetch.filter(res => res.type === "wanted-type");
if(result) {
  array.push(result);
}

它成功地将所需的数据推送到“数组”中，但是当我稍后尝试访问任何内容时，它说它是未定义的。例如：

console.log(array[0].attributes) or
console.log(array[0].attributes.stats.name)

它说“未定义”。

你能帮忙吗？

Answer 1

观察后面的

result

和

array

：

const result = arrayFetch.filter(res => res.type === "wanted-type");
if(result) {
  array.push(result);
}

由于

result

是一个数组，因此

array

是一个 数组的数组。 所以这行不通：

console.log(array[0].attributes)

因为数组没有名为

attributes

的属性。 这可行：

console.log(array[0][0].attributes)

但是不要深入研究现有的结构，而是使用更好的结构。 为什么首先将

result

推入新数组中？ 直接使用

result

即可：

let arrayFetch = fetchData.included;
const result = arrayFetch.filter(res => res.type === "wanted-type");
console.log(result[0].attributes);