时间戳

首页 > 解决方案 > 按属性键对深度嵌套的值进行分组？

javascript - 按属性键对深度嵌套的值进行分组？

问题描述

我正在处理的应用程序中具有以下结构：

collection {

   user_entry_1 {
      page_1_id {
         input_1_id: someValue
         input_2_id: anotherValue
      },
      page_2_id {
         ...
      }
   },
   user_entry_2 {
      ...

如您所见，实际需要的值嵌套得很深。现在，我一直在为如何对数据进行分组而奋斗了几个小时，以便生成的对象如下所示：

collection {

  page_1_id {
    input_1_id: [value1, value2, value3...],
    input_2_id: [value1, value2, value3...]
  },
  page_2_id {
    input_3_id: [value1, value2, value3...],
    ...

如果有任何帮助，我正在处理分布在多个页面上的动态表单。我尝试过 lodash，使用大量数组编写自定义意大利面条函数等，但不能简单地想出一个聪明的方法来安排数据，如上所示。基本上我需要将“最深”的嵌套值放入数组中，每个数组的键将是“输入”的键（多个相同的键，因为多个用户）。

我现在只编码了几年，所以这些类型的数组/对象操作对我来说并不是普通的香草。对不起，如果很难阅读或者我不清楚。

这是我的尝试：

const collection = {
       user_entry_1: {
          page_1_id: {
             input_1_id: 'someValue',
             input_2_id: 'anotherValue'
          },
          page_2_id: {
             input_3_id: 'someValue' //,
             //, enter other data here:
          }
       },
       user_entry_2: {
          page_1_id: {
             input_1_id: 'someValue',
             input_2_id: 'anotherValue'
          },
          page_2_id: {
             input_3_id: 'someValue' //,
             //, enter other data here:
          }
      }
};      

//ENTER THE CODE YOU TRIED HERE:

如您所见，我的输出是这样的：

//Enter output from your attempt:

但我期望：

//Enter desired output:

标签： javascriptarraysobjectgroupinglodash

解决方案

你可以用reduce函数来做到这一点。

var collection = { 'user_entry_1': { 'page_1_id': { 'input_1_id': 'someValue 1', 'input_2_id': 'anotherValue' }, 'page_2_id' : { 'input_1_id': 'someValue 2', 'input_2_id': 'anotherValue' }}, 'user_entry_2': { 'page_1_id': { 'input_1_id': 'someValue 2', 'input_2_id': 'anotherValue 2' }, 'page_2_id' : { 'input_1_id': 'someValue 2', 'input_2_id': 'anotherValue 2' }}};

var result = Object.entries(collection).reduce((acc, [key, value])=>{ 
  for(const [k, v] of Object.entries(value)){
     acc[k] = acc[k] || {};
     Object.entries(v).forEach(([inputKey, inputValue])=>{
       acc[k][inputKey] =acc[k][inputKey] || [];
       acc[k][inputKey].push(inputValue);
    })
  }
  return acc;
}, {});

console.log(result);

推荐阅读