从 json 响应对象中过滤数据

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。知道如何让两个名称都出现在过滤后的数组中吗？

编辑：正确的响应对象在代码框里

Answer 1

如果我对您的理解正确，您需要一个 names 的平面列表，其中 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)