javascript - 从 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 以按类型查找元素。然后映射返回的过滤器以创建新的有序数组。在包含数组之一中，有一个DataSource的标识类型，下面是一个示例:

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

我正在记录dataSourceName，但数组只有一个预期名称，并且它仅来自第一个数组，因此就像 map 没有到达第二个数据.数据。知道如何让两个名字都出现在过滤后的数组中吗？

编辑:正确的响应对象位于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)