从对象数组创建新的对象数组

Question

大家好，我想询问一些关于从对象数组创建新对象数组的问题。我需要修改数据，因为我需要在React Native中使用Victory库创建分组条形图。当前的数据需要进行调整以创建图表。

数据看起来像这样：

[
            {
                "date": "April 2022",
                "phase": [
                    {
                        "phaseName": "initiation",
                        "days": 7
                    },
                    {
                        "phaseName": "justification",
                        "days": 6
                    },
                    {
                        "phaseName": "planning",
                        "days": 4
                    }
                ]
            },
            {
                "date": "Mei 2022",
                "phase": [
                    {
                        "phaseName": "justification",
                        "days": 44
                    },
                    {
                        "phaseName": "partner-selection",
                        "days": 32
                    },
                    {
                        "phaseName": "planning",
                        "days": 40
                    },
                    {
                        "phaseName": "initiation",
                        "days": 25
                    },
                    {
                        "phaseName": "signing",
                        "days": 5
                    }
                ]
            },
            {
                "date": "Juni 2022",
                "phase": [
                    {
                        "phaseName": "signing",
                        "days": 6
                    },
                    {
                        "phaseName": "planning",
                        "days": 54
                    },
                    {
                        "phaseName": "justification",
                        "days": 36
                    },
                    {
                        "phaseName": "initiation",
                        "days": 28
                    },
                    {
                        "phaseName": "partner-selection",
                        "days": 30
                    }
                ]
            }
]

我该如何创建类似这样的数据？（Victory能够接受的数据）

[
  {
    x:'April 2022', 
    y: 7, 
    type: 'initiation'
    
  },
  { 
    x: 'Mei 2022', 
    y: 44, 
    type: 'justification' 
    
  }, 
  { 
    x: 'Juni 2022', 
    y: 6, 
    type: 'signing' 
    
  }
],
[
  { 
    x: 'April 2022', 
    y: 6, 
    type: 'justification' 
    
  }, 
  { 
    x: 'Mei 2022', 
    y: 32, 
    type: 'partner-selection' 
    
  }, 
  { 
    x: 'Juni 2022', 
    y: 54, 
    type: 'planning'
  }
],
[
  { 
    x: 'April 2022', 
    y: 4, 
    type: 'planning' 
    
  }, 
  { 
    x: 'Mei 2022',
    y: 40, 
    type: 'planning' 
    
  }, 
  { 
    x: 'Juni 2022', 
    y: 36, 
    type: 'justification' 
    
  }
],
[
  { 
    x: 'Mei 2022', 
    y: 25, 
    type: 'initiation'
  }, 
  { 
    x: 'Juni 2022', 
    y: 28, 
    type: 'initiation'
  }
],
[
  { 
    x: 'Mei 2022', 
    y: 5, 
    type: 'signing'
  }, 
  { 
    x: 'Juni', 
    y: 30, 
    type: 'partner-selection'
      
  }
]

- Alek Pacul

---

发现了一篇关于用于进行此类转换的库的文章：https://medium.com/agileactors/json-to-json-transformation-a-pragmatic-approach-c2c5e5a32636 （该库是@perpk/json-xform） - cyberbrain

Answer 1

也许有更好优化的解决方案，但这个可行且代码易于理解 :)

const yourArray = [{"date":"April 2022","phase":[{"phaseName":"initiation","days":7},{"phaseName":"justification","days":6},{"phaseName":"planning","days":4}]},{"date":"Mei 2022","phase":[{"phaseName":"justification","days":44},{"phaseName":"partner-selection","days":32},{"phaseName":"planning","days":40},{"phaseName":"initiation","days":25},{"phaseName":"signing","days":5}]},{"date":"Juni 2022","phase":[{"phaseName":"signing","days":6},{"phaseName":"planning","days":54},{"phaseName":"justification","days":36},{"phaseName":"initiation","days":28},{"phaseName":"partner-selection","days":30}]}];

const res = [];
for (const month of yourArray) {
  for (const phase of month.phase) {
    res.push({
      x: month.date,
      y: phase.days,
      type: phase.phaseName
    });
  }
};

console.log(res);

- AoooR

Answer 2

你可以重命名和转置这些项。

const
    data = [{ date: "April 2022", phase: [{ phaseName: "initiation", days: 7 }, { phaseName: "justification", days: 6 }, { phaseName: "planning", days: 4 }] }, { date: "Mei 2022", phase: [{ phaseName: "justification", days: 44 }, { phaseName: "partner-selection", days: 32 }, { phaseName: "planning", days: 40 }, { phaseName: "initiation", days: 25 }, { phaseName: "signing", days: 5 }] }, { date: "Juni 2022", phase: [{ phaseName: "signing", days: 6 }, { phaseName: "planning", days: 54 }, { phaseName: "justification", days: 36 }, { phaseName: "initiation", days: 28 }, { phaseName: "partner-selection", days: 30 }] }],
    result = data.reduce((r, { date: x, phase }) => {
        phase.forEach(({ phaseName: type, days: y }, i) => {
            r[i] ??= [];
            r[i].push({ x, y, type });
        });
        return r;
    }, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

- Nina Scholz

---

谢谢你，Nina。这正是我需要的。非常感谢你的回答。 - Alek Pacul

但我可以问一下，'??='符号是什么意思？ - Alek Pacul

这是逻辑空值赋值运算符 ??=。 - Nina Scholz

Answer 3

您可以像这样使用JavaScript函数操作符map和reduce。

const data = [
  {
    date: 'April 2022',
    phase: [
      {
        phaseName: 'initiation',
        days: 7,
      },
      {
        phaseName: 'justification',
        days: 6,
      },
      {
        phaseName: 'planning',
        days: 4,
      },
    ],
  },
  {
    date: 'Mei 2022',
    phase: [
      {
        phaseName: 'justification',
        days: 44,
      },
      {
        phaseName: 'partner-selection',
        days: 32,
      },
      {
        phaseName: 'planning',
        days: 40,
      },
      {
        phaseName: 'initiation',
        days: 25,
      },
      {
        phaseName: 'signing',
        days: 5,
      },
    ],
  },
  {
    date: 'Juni 2022',
    phase: [
      {
        phaseName: 'signing',
        days: 6,
      },
      {
        phaseName: 'planning',
        days: 54,
      },
      {
        phaseName: 'justification',
        days: 36,
      },
      {
        phaseName: 'initiation',
        days: 28,
      },
      {
        phaseName: 'partner-selection',
        days: 30,
      },
    ],
  },
];

const result = data
  .reduce((array, item) => {
    array.push(
      item.phase.map((p) => {
        return { x: item.date, y: p.days, type: p.phaseName };
      })
    );
    return array;
  }, [])
  .reduce(
    (array, month) => {
      month.forEach((item, i) => {
        if (!array[i]) array[i] = [];
        array[i].push(item);
      });
      return array;
    },
    [[]]
  );

console.log(result);

- Haris Bouchlis

---

你好Haris，谢谢你的回复，但这不是我想要的。我想要像这样的格式[{x:'四月'，y:7，type:'启动'},{x:'五月'，y:44，type:'正当化'},{x:'六月'，y:6，type:'签署'}]。在一个数组中，我希望有一个基于月份的唯一对象。因此，如果有一个对象与x：“2022年4月”相同，则下一个对象与x：“2022年4月”相同的对象应该在另一个数组中，以此类推。 - Alek Pacul

@AlekPacul 我更新了答案并包含了这个，看一下吧。 - Haris Bouchlis

Answer 4

请使用以下代码。

const convertedArray = (arr) => {
  let resultantArray = [];

  arr.forEach((item) => {
    const { date } = item;
    const { phase } = item;

    phase.forEach((phaseItem, index) => {
      const { phaseName } = phaseItem;
      const { days } = phaseItem;
      const phaseObject = {
        x: date,
        y: days,
        type: phaseName,
      };
      if (resultantArray.length === 0) {
        resultantArray = [[{ ...phaseObject }]];
      } else {
        if (resultantArray[index]) {
          resultantArray[index] = [...resultantArray[index], phaseObject];
        } else {
          resultantArray[index] = [{ ...phaseObject }];
        }
      }
    });
  });
  return resultantArray;
};

console.log(convertedArray(arr));

- Sanket Tikam