Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

Question

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

I am dealing with an array of Responses that contain multiple IDs along with different question answers.

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}]}]
---------------------------------------------------------

I am striving to combine the ID and Name into one array along with a single Question object containing each Question ID paired with its corresponding answer. Despite trying various methods, I have been unsuccessful thus far. Any assistance in this matter would be greatly appreciated. Thank you.

javascript jquery arrays typescript spfx

Answer 1

Answer №1

To start, you need to group the data based on the Name field. Once the data is grouped, you can then proceed to map the values. During the mapping process, you have the option to destructure the Id and Name fields of the first question and then map the QuestionId and Answer fields to the Question field.

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; }

Alternatively, if you prefer a more direct approach, you can use the reduce function without grouping beforehand. This method may be more tightly coupled but eliminates the need for additional mapping steps.

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);

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

Answer 2

To start, you need to group the data based on the Name field. Once the data is grouped, you can then proceed to map the values. During the mapping process, you have the option to destructure the Id and Name fields of the first question and then map the QuestionId and Answer fields to the Question field.

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; }

Alternatively, if you prefer a more direct approach, you can use the reduce function without grouping beforehand. This method may be more tightly coupled but eliminates the need for additional mapping steps.

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);

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

Answer 3

Answer №2

const dataArr = [ 
  {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}
]

let modifiedData = {};
dataArr.forEach(({ Id, Name, QuestionId, Answer }) => {
  if(modifiedData[Id]) {
    modifiedData[Id]["Questions"] = [
      ...modifiedData[Id]["Questions"],
      { QuestionId, Answer }
    ]
  } else {
    modifiedData[Id] = {
      Id,
      Name,
      Questions: [{ QuestionId, Answer }]
    } 
  }
})

console.log(Object.values(modifiedData).flat());

Answer 4

const dataArr = [ 
  {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}
]

let modifiedData = {};
dataArr.forEach(({ Id, Name, QuestionId, Answer }) => {
  if(modifiedData[Id]) {
    modifiedData[Id]["Questions"] = [
      ...modifiedData[Id]["Questions"],
      { QuestionId, Answer }
    ]
  } else {
    modifiedData[Id] = {
      Id,
      Name,
      Questions: [{ QuestionId, Answer }]
    } 
  }
})

console.log(Object.values(modifiedData).flat());

Answer 5

Answer №3

let data = [{ID : 1,FirstName : 'Jane', QuestionID :1,Response :8},
           {ID : 2,FirstName : 'Alice', QuestionID :2,Response :9},
           {ID : 3,FirstName : 'Bob', QuestionID :3,Response :3},
           {ID : 4,FirstName : 'Eve', QuestionID :4,Response :2}]

const finalResult = data.reduce((accumulator,currentValue,index,source)=>{
    const {ID, FirstName, QuestionID, Response} = currentValue
    if(index===0 ){
        accumulator.push({ID,FirstName,Question:[{QuestionID, Response}]})
    }else{
        const itemId = accumulator.findIndex(element=>element.ID===currentValue.ID)
        if(itemId>= 0){
            accumulator[itemId].Question.push({QuestionID, Response})
        }else{
            accumulator.push({ID,FirstName,Question:[{QuestionID, Response}]})
        }
    }
  
    return accumulator
},[])

console.log(finalResult)

Answer 6

let data = [{ID : 1,FirstName : 'Jane', QuestionID :1,Response :8},
           {ID : 2,FirstName : 'Alice', QuestionID :2,Response :9},
           {ID : 3,FirstName : 'Bob', QuestionID :3,Response :3},
           {ID : 4,FirstName : 'Eve', QuestionID :4,Response :2}]

const finalResult = data.reduce((accumulator,currentValue,index,source)=>{
    const {ID, FirstName, QuestionID, Response} = currentValue
    if(index===0 ){
        accumulator.push({ID,FirstName,Question:[{QuestionID, Response}]})
    }else{
        const itemId = accumulator.findIndex(element=>element.ID===currentValue.ID)
        if(itemId>= 0){
            accumulator[itemId].Question.push({QuestionID, Response})
        }else{
            accumulator.push({ID,FirstName,Question:[{QuestionID, Response}]})
        }
    }
  
    return accumulator
},[])

console.log(finalResult)

Answer 7

Answer №4

If you utilize the Set method to identify unique names, you can then use those names to filter items within the Responses array:

let 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}];

let result = [...new Set(Responses.map(({Name}) => Name))]
    .map(e => Responses.filter(({Name}) => Name === e))
    
console.log(result)

Answer 8

If you utilize the Set method to identify unique names, you can then use those names to filter items within the Responses array:

let 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}];

let result = [...new Set(Responses.map(({Name}) => Name))]
    .map(e => Responses.filter(({Name}) => Name === e))
    
console.log(result)

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Instructions on creating an individual DropdownIndicator component with React-select for the purpose of reusability in different sections of the project

The component data fails to reflect the updated value following a status change due to not properly retrieving the new result from the POST function

Smartlook fails to correctly store user consent

Storing the Outcome of a mongodb Search in a Variable

typescript: exploring the world of functions, overloads, and generics

Utilizing JSON strings within an onclick function

Encountering a Module not found error with a ValidationError when trying to import an SVG file within a React

What is the method to extract the value of $r['id_usr'] from a select tag in PHP and store it in a variable?

Move the absolute div by sliding it to the left from 120% to -10px

How does assigning a checkbox's value as 'undefined' result in the addition of ng-invalid?

Animations of bezier curves created with Three.js

Having trouble resolving all parameters for the SiteNotificationComponent: (?)

What to do while waiting for MySQL query in an asynchronous function?

Is there a way to automatically launch a new tab upon arriving from another website?

The chosen selection automatically deactivates the checkbox with a matching value

How to extract data-bound value from a <span> element using Angular

What is the process for assigning a background color to a specific option?

Data will not bind with Laravel and Vue

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

Angular 4: Implementing a Re-login Dialog/Modal Using Interceptors