Question

我有一个返回JSON响应对象的API调用。数据的形状有点混乱，我无法弄清楚要运行.map()和.filter()的确切对象才能获得所需的结果。

  .then(response => {
    console.log(response); //see below for shape of data
    var dataSourceInfo = response.data.included.filter(
      element => element.type === "DataSource"
    );
    var dataSourceName = dataSourceInfo.map(function(included) {
      return included["name"];
    });
    console.log(dataSourceName);

在两个数组中，我试图过滤response.data.included以按类型查找元素。然后映射返回的过滤器以创建一个新的有序数组。在included数组之一中，有一个type的标识DataSource，下面是一个示例：

included: [
  {
    id: "2147483604",
    type: "DataSource",
    name: "Some DataSource"
  },

我正在记录dataSourceName，但是该数组仅具有预期的名称之一，并且仅来自第一个数组，因此好像地图未到达第二个data.data。知道如何让两个名称都出现在过滤后的数组中吗？

编辑：正确的响应对象位于codesandbox中

Answer 1

如果我对您的理解正确，那么您希望得到一个name的平面列表，其中type是"DataSource"，并给出如下所示的输入：

const response = {
  data: [
    {
      data: {
        data: {
          included: [
            { type: 'DataSource', name: 'First' },
            { type: 'Blah', name: 'Second' },
            { type: 'DataSource', name: 'Third' }
          ]
        }
      }
    },
    {
      data: {
        data: {
          included: [
            { type: 'DataSource', name: 'Fourth' },
            { type: 'Blah', name: 'Fifth' },
            { type: 'DataSource', name: 'Sixth' }
          ]
        }
      }
    },
  ]
}

const result = response.data.flatMap(({data: {data: {included}}}) => 
  included.reduce((memo, {type, name}) => {
    if (type === 'DataSource') {
      memo.push(name)
    }
    return memo;
  }, [])
)

console.log(result)

我已忽略了与问题无关的部分响应

更新：

以下代码经过调整，可以与https://codesandbox.io/s/ympo7pr0xx中列出的responseObject一起使用

const responseObject = [ { data: { data: { id: "2147483605", selfUri: "/schedules/2147483605", type: "Schedule", startTime: 1545409610826, status: "InProgress", query: { id: "2147483603", selfUri: "/queries/2147483603", type: "Query" }, dataSource: { id: "2147483604", selfUri: "/datasources/2147483604", type: "DataSource" } }, included: [ { id: "2147483603", selfUri: "/queries/2147483603", type: "Query", name: "Query1", status: "Scheduled", querySchema: { id: "2147483601", selfUri: "/queryschemas/2147483601", type: "QuerySchema" } }, { id: "2147483601", selfUri: "/dataschemas/2147483601", type: "DataSchema", name: "Phone Data" }, { id: "2147483601", selfUri: "/queryschemas/2147483601", type: "QuerySchema", name: "QS1", dataSchema: { id: "2147483601", selfUri: "/dataschemas/2147483601", type: "DataSchema" }, queriesUri: "/queryschemas/2147483601/queries" }, { id: "2147483604", selfUri: "/datasources/2147483604", type: "DataSource", name: "Standalone- 5K", description: "Standalone 5K record" } ] } }, { data: { data: { id: "2147483606", selfUri: "/schedules/2147483606", type: "Schedule", startTime: 1545410049652, status: "Pending", query: { id: "2147483603", selfUri: "/queries/2147483603", type: "Query" }, dataSource: { id: "2147483608", selfUri: "/datasources/2147483608", type: "DataSource" } }, included: [ { id: "2147483608", selfUri: "/datasources/2147483608", type: "DataSource", name: "Standalone 5", description: "Standalone 5 record" }, { id: "2147483603", selfUri: "/queries/2147483603", type: "Query", name: "Query1", status: "Scheduled", querySchema: { id: "2147483601", selfUri: "/queryschemas/2147483601", type: "QuerySchema" }, schedulesUri: "/queries/2147483603/schedules" }, { id: "2147483601", selfUri: "/dataschemas/2147483601", type: "DataSchema", name: "Phone Data" }, { id: "2147483601", selfUri: "/queryschemas/2147483601", type: "QuerySchema", name: "QS1", dataSchema: { id: "2147483601", selfUri: "/dataschemas/2147483601", type: "DataSchema" } } ] } } ];

const result = responseObject.flatMap(({data: {included}}) => 
  included.reduce((memo, {type, name}) => {
    if (type === 'DataSource') {
      memo.push(name)
    }
    return memo;
  }, [])
)

console.log(result)

从json响应对象过滤数据

1 个答案: