如何使用Node-Fetch API访问返回对象中的数组数据

我负责一个需要调用API的项目，已经用Node-Fetch调用指定的GraphQL接口，请求方法和body都配置正确，能拿到包含数组的响应对象，但不知道怎么访问其中标注为[Array]的数据。

请求代码 #

const response = await fetch("https://alt-platform-server.production.internal.onlyalt.com/graphql/MultiPartItemGroupsComplete", {
  "body": "{\"operationName\":\"MultiPartItemGroupsComplete\",\"variables\":{\"input\":{\"cursor\":null,\"limit\":100}},\"query\":\"query MultiPartItemGroupsComplete($input: ItemGroupsInput!) {\n  itemGroups(input: $input) {\n    itemGroups {\n      items {\n        ...MultiPartItemInitial\n        ...MultiPartItemDetails\n        __typename\n      }\n      __typename\n    }\n    cursor\n    totalCount\n    __typename\n  }\n}\n\nfragment MultiPartItemInitial on Item {\n  id\n  displayNames {\n    ...ItemDisplayNamesBase\n    __typename\n  }\n  images {\n    ...ImageBase\n    __typename\n  }\n  __typename\n}\n\nfragment ItemDisplayNamesBase on ItemDisplayNames {\n  itemName\n  groupName\n  assetName\n  __typename\n}\n\nfragment ImageBase on Image {\n  position\n  url\n  __typename\n}\n\nfragment MultiPartItemDetails on Item {\n  id\n  purchaseDate\n  timeSeriesStats {\n    ...PortfolioTimeSeriesStatsBase\n    __typename\n  }\n  attributes {\n    ...ItemAttributesBase\n    __typename\n  }\n  itemVaultState {\n    ...ItemVaultStateBase\n    __typename\n  }\n  listing {\n    ...ItemListingBase\n    __typename\n  }\n  __typename\n}\n\nfragment PortfolioTimeSeriesStatsBase on TimeSeriesStats {\n  latestValue\n  costBasis\n  changeOverWeek\n  changeOverWeekPercent\n  unrealizedGain\n  unrealizedGainPercent\n  __typename\n}\n\nfragment ItemAttributesBase on ItemAttributes {\n  gradeNumber\n  gradingCompany\n  serial\n  printRun\n  certNumber\n  autograph\n  centering\n  corners\n  edges\n  surfaces\n  qualifier\n  __typename\n}\n\nfragment ItemVaultStateBase on ItemVaultState {\n  createdAt\n  state\n  __typename\n}\n\nfragment ItemListingBase on Listing {\n  id\n  state\n  listPrice\n  type\n  __typename\n}\n\"}",
  "method": "POST"
})

返回结果 #

{
  data: {
    itemGroups: {
      itemGroups: [Array],
      cursor: '1668524928.869299:a735305e-eec9-4ae5-a7ef-04acc3d36023',
      totalCount: 3283,
      __typename: 'ItemGroupsPayload'
    }
  }
}

解决方法 #

1. 先解析Fetch响应为JSON对象 #

你当前的代码仅获取了response对象，还需要调用.json()方法将响应体解析为可操作的JavaScript对象：

const data = await response.json();

2. 链式访问嵌套数组 #

解析完成后，通过层级链式访问即可拿到目标数组：

// 获取最外层的itemGroups数组
const itemGroupsArray = data.data.itemGroups.itemGroups;

// 遍历数组，访问内部的items数据
itemGroupsArray.forEach(group => {
  // 打印每个分组下的items列表
  console.log(group.items);
  // 示例：获取第一个item的名称
  if (group.items.length > 0) {
    console.log(group.items[0].displayNames.itemName);
  }
});

3. 解决控制台显示[Array]的问题 #

控制台显示[Array]是因为Node.js默认限制了对象打印深度，无法展示嵌套数组的完整内容，可通过以下两种方式查看完整数据：

• 使用JSON.stringify格式化输出：

console.log(JSON.stringify(data, null, 2));

• 调整Node.js控制台的打印深度（设置为无限）：

require('util').inspect.defaultOptions.depth = null;
console.log(data);

内容的提问来源于stack exchange，提问作者Dan