从给定数组创建一个新数组并获得不同的属性作为子对象/数组

html5 • • 问答

我有多个 id 但有不同问题答案的 Responses 数组。

Responses = 
[0:{Id : 1,Name : John, QuestionId :1,Answer :8},
1:{Id : 1,Name : John, QuestionId :2,Answer :9},
2:{Id : 1,Name : John, QuestionId :3,Answer :3},
3:{Id : 1,Name : John, QuestionId :4,Answer :2},
4:{Id : 2,Name : Mark, QuestionId :1,Answer :6},
5:{Id : 2,Name : Mark, QuestionId :2,Answer :2},
6:{Id : 2,Name : Mark, QuestionId :3,Answer :5},
7:{Id : 2,Name : Mark, QuestionId :4,Answer :1}]
----------------------------------------------------------------
Output I want :
 
Arr = 
[0:{Id : 1,Name : John,
 Question : [{QuestionId :1,Answer :9},{QuestionId :2,Answer :8},{QuestionId :3,Answer :3},{QuestionId :4,Answer :2}]},
1:{Id : 2,Name : Mark,
 Question : [{QuestionId :1,Answer :6},{QuestionId :2,Answer :2},{QuestionId :3,Answer :5},{QuestionId :4,Answer :1}]}]
---------------------------------------------------------

我想创建一个带有 Id、Name 和一个 Question 对象的数组，该对象将包含带有答案的 Question Id。我尝试了不同的方式，但这对我不起作用。如果你能在这里帮助我，那就太好了。谢谢你。

回答

您首先必须按 对数据进行分组Name。获得分组数据后，映射值。映射时，您可以解构第一个问题的Id和Name字段，然后将QuestionId和Answer字段映射到该Question字段。

const groupBy = (arr, key) => arr.reduce((acc, item) => ({
  ...acc,
  [item[key]]: [ ...(acc[[item[key]]] ?? []), item ]
}), {});

const responses = [
  { "Id": 1, "Name": "John", "QuestionId": 1, "Answer": 8 },
  { "Id": 1, "Name": "John", "QuestionId": 2, "Answer": 9 },
  { "Id": 1, "Name": "John", "QuestionId": 3, "Answer": 3 },
  { "Id": 1, "Name": "John", "QuestionId": 4, "Answer": 2 },
  { "Id": 2, "Name": "Mark", "QuestionId": 1, "Answer": 6 },
  { "Id": 2, "Name": "Mark", "QuestionId": 2, "Answer": 2 },
  { "Id": 2, "Name": "Mark", "QuestionId": 3, "Answer": 5 },
  { "Id": 2, "Name": "Mark", "QuestionId": 4, "Answer": 1 }
];

const arr = Object.values(groupBy(responses, 'Name')).map(questions => {
  const [ { Id, Name } ] = questions;
  return {
    Id, Name, Question: questions.map(({ QuestionId, Answer }) =>
      ({ QuestionId, Answer }))
  };
});

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

或者，您可以跳过分组并减少。这有点耦合，但它削减了映射。

const reduceBy = (arr, key) => Object.values(arr.reduce((acc, item) => {
  const
    { Id, Name, QuestionId, Answer } = item,
    prev = acc[[item[key]]] || { Id, Name, Question: [] };
  return {
    ...acc,
    [item[key]]: {
      ...prev,
      Question: [ ...prev.Question, { QuestionId, Answer } ]
    }
  };
}, {}));

const responses = [
  { "Id": 1, "Name": "John", "QuestionId": 1, "Answer": 8 },
  { "Id": 1, "Name": "John", "QuestionId": 2, "Answer": 9 },
  { "Id": 1, "Name": "John", "QuestionId": 3, "Answer": 3 },
  { "Id": 1, "Name": "John", "QuestionId": 4, "Answer": 2 },
  { "Id": 2, "Name": "Mark", "QuestionId": 1, "Answer": 6 },
  { "Id": 2, "Name": "Mark", "QuestionId": 2, "Answer": 2 },
  { "Id": 2, "Name": "Mark", "QuestionId": 3, "Answer": 5 },
  { "Id": 2, "Name": "Mark", "QuestionId": 4, "Answer": 1 }
];

const arr = reduceBy(responses, 'Name');

console.log(arr);

以上是从给定数组创建一个新数组并获得不同的属性作为子对象/数组的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>