【问题标题】:Accessing all Individual Values of a Nested Object Array?访问嵌套对象数组的所有单个值?
【发布时间】:2021-02-12 14:35:24
【问题描述】:

我正在尝试访问每个项目的每个列表对象的单独计数值,以在数组中使用它们。我尝试了各种地图方法,但它一直返回未定义。我需要一种动态方法来收集这些计数,以便在添加更多列表、项目、位置和计数时,它会更新。

数据:

const data = [
  {
    name: "List1",
    items: [
      {
        name: "Item1",
        locations: [
          { position: "a", count: 20 },
          { position: "b", count: 30 },
        ],
      },
      {
        name: "Item2",
        locations: [
          { position: "c", count: 40 },
          { position: "d", count: 50 },
        ],
      },
    ],
  },
  {
    name: "List2",
    items: [
      {
        name: "Item3",
        locations: [
          { position: "e", count: 60 },
          { position: "f", count: 70 },
        ],
      },
      {
        name: "Item4",
        locations: [
          { position: "g", count: 80 },
          { position: "h", count: 90 },
        ],
      },
    ],
  },
];

期望的结果:

const onlyCounts = [20,30,40,50,60,70,80,90];

任何提示或信息将不胜感激,谢谢!

【问题讨论】:

  • “我尝试过各种地图方法”...比如?

标签: javascript arrays reactjs object array.prototype.map


【解决方案1】:

如果您因为不确定嵌套对象的形状/键/深度而需要通用解决方案,那么只要您的数据没有任何循环,这里就有一个递归解决方案。

const getCounts = (value) =>
  value.flatMap((el) =>
    Object.entries(el).flatMap(([key, value]) => {
      if (key === "count") return [value];
      if (Array.isArray(value)) return getCounts(value);
      return [];
    })
  );

const data = [
  {
    name: "List1",
    items: [
      {
        name: "Item1",
        locations: [
          { position: "a", count: 20 },
          { position: "b", count: 30 }
        ]
      },
      {
        name: "Item2",
        locations: [
          { position: "c", count: 40 },
          { position: "d", count: 50 }
        ]
      }
    ]
  },
  {
    name: "List2",
    items: [
      {
        name: "Item3",
        locations: [
          { position: "e", count: 60 },
          { position: "f", count: 70 }
        ]
      },
      {
        name: "Item4",
        locations: [
          { position: "g", count: 80 },
          { position: "h", count: 90 }
        ]
      }
    ]
  }
];

const getCounts = (value) =>
  value.flatMap((el) =>
    Object.entries(el).flatMap(([key, value]) => {
      if (key === "count") return [value];
      if (Array.isArray(value)) return getCounts(value);
      return [];
    })
  );

console.log(getCounts(data))

真正通用的解决方案

const getFieldArray = (value, field) =>
  value.flatMap((el) =>
    Object.entries(el).flatMap(([key, value]) => {
      if (key === field) return [value];
      if (Array.isArray(value)) return getFieldArray(value, field);
      return [];
    })
  );

console.log(getFieldArray(data, 'count'));

【讨论】:

  • 没错!这就是我想问的,但不知道如何问。再次感谢德鲁。我了解到您可以使用类似于 @Phils 的递归方法,它允许您使用平面 map() 原型定位键字符串嵌套数据。这样我可以只传递一个字符串变量作为案例,所以它更加自动化。
  • @pc.dependency 欢迎。是的,如果你愿意,你当然可以调整它来传递一个“目标”键。
猜你喜欢
  • 2022-01-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-22
  • 2021-10-02
  • 2020-07-11
相关资源
最近更新 更多