Question

当密钥为动态时，如何处理访问JSON响应内的对象？

在我的代码示例中，我创建了一个简化器，该简化器进行API调用，但需要使用参数才能工作：

import { fetchAPI } from '../lib/api'

export async function resultsReducer(dataType, sortParam, nodeFields) { 
  let allResults = []
  let fetch = await fetchAPI(`
    query {
      ${dataType} (sortBy: ${sortParam}) {
        pageInfo {
          hasNextPage
          startCursor
          endCursor
        }
        edges {
          node {
            ${nodeFields}
          }
          cursor
        }
        totalCount
      }
    }
  `)

  // How I access the dataType key - this doesn't work 
  fetch.dataType.edges.map( (item) => {
    allResults.push(item)
  })
}

该函数起作用，它返回一个响应，该响应存储在fetch上，如下所示：

{
  allLocationss: {
    pageInfo: {
      hasNextPage: true,
      startCursor: 'YXJyYXljb25uZWN0aW9uOjA=',
      endCursor: 'YXJyYXljb25uZWN0aW9uOjE5'
    },
    edges: [
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object], [Object],
      [Object], [Object]
    ],
    totalCount: 52
  }
}

在我的示例响应中，allLocationss是键，但有时是allTopics或allEvents，依此类推。如果使用Object.keys(fetch)[1]，则会返回一个字符串。我也尝试过fetch.Object.keys(fetch)[1].edges，但这也不起作用。会喜欢一些想法。

Answer 1

要使用响应访问动态密钥，请使用variable[key]表示法

// How I access the dataType key?
fetch[dataType].edges.map((item) => {
  allResults.push(item);
});

Answer 2

您可以使用方括号表示法来访问具有dataType值的键：

fetch[dataType]

由于map()已经创建了一个数组，因此您无需声明allResults.push()。相反，只需使用map()返回的数组即可：

const allResults = fetch[dataType].edges.map(item => item);

实际上，如果不需要数组的副本，则可以直接分配：

const allResults = fetch[dataType].edges;

使用动态键访问Javascript对象值

2 个答案: