JavaScript modify Array of Objects and alter contained data

Question

I am having difficulties formatting some data. Currently, I receive data in the following structure.

[
    {
       "q1":"5",
       "q2":[
          "13",
          "12",
       ],
       "q3":"test",
    }
]

I essentially need to modify this or even create a new object, that takes the following structure.

[
    {
      id: 1, //q1
      answers: [
        {
          answer: '5',
        },
      ],
    },
    {
      id: 2,  //q2
      answers: [
        {
          answer: '13',
        },
        {
          answer: '12',
        },
      ],
    },
    {
      id: 3,  //q3
      answers: [
        {
          answer: 'test',
        },
      ],
    },
];

So the id in the above would be obtained by remove the q and getting the number in the first data object. It would then have an answers array that would have an object for each answer.

I have been attempting this but have gotten lost. I don't know if I should use loops, mapping, filters etc. To be honest, the furthest I have got so far is obtaining the keys

var modified = data.map(function(item) {
  return Object.keys(item)
})

I have created a JSFiddle where I have been attempting to do this.

Is there any way I can achieve the data I am after?

Many thanks

Kirill Savik · Accepted Answer · 2021-09-27 17:06:05Z

4

Please use map function.

const data = {
   "q1":"5",
   "q2":[
      "13",
      "12",
   ],
   "q3":"test",
};

const result = Object.keys(data).map(key => {
    let item = {id: key.substring(1), answers: []};
    if(typeof data[key] === "string")
        item.answers.push({answer: data[key]});
    else
        item.answers = data[key].map(val => ({answer: val}));
    return item;
});

console.log(result)

answered Sep 27, 2021 at 17:06

Kirill Savik

1,2886 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

navnath · Accepted Answer · 2021-09-27 18:06:37Z

1

const inputData = [
    {
       "q1":"5",
       "q2":[
          "13",
          "12",
       ],
       "q3":"test",
    }
]

function answerMapper(objVal, id){
  return Array.isArray(objVal)
  ?
  { id, answers: objVal.map(answer => ({ answer }))}
  :
  { id, answers: [{answer: objVal }] }
}

function formatObject(obj){
  return Object.keys(obj).map((k, i)  => answerMapper(obj[k], i+1));
}

const result = inputData.map(obj => formatObject(obj));

// remove flatMap if your inputData has more than one entry
console.log(result.flatMap(x => x));

edited Sep 27, 2021 at 18:06

answered Sep 27, 2021 at 17:16

navnath

3,7241 gold badge13 silver badges20 bronze badges

1 Comment

navnath Over a year ago

edited to increase readability

Andy · Accepted Answer · 2021-09-27 17:26:22Z

1

map over the first element of the data with Object.entries, grab the key and value, create a new answers array and return a new object.

const data = [{
  "q1": "5",
  "q2": [
    "13",
    "12",
  ],
  "q3": "test",
}];

const out = Object.entries(data[0]).map(obj => {

  const [ key, value ] = obj;
 
  const id = Number(key[1]);
  
  // If the the value is an array
  // return a new array of mapped data
  // Otherwise return an array containing
  // one object
  const answers = Array.isArray(value)
    ? value.map(el => ({ answer: el }))
    : [{ answer: value }];
  
  // Return the new object
  return { id, answers };

});

console.log(out);

answered Sep 27, 2021 at 17:26

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

Reetesh Kumar · Accepted Answer · 2021-09-27 17:32:27Z

1

lets create a pure function which accepts the object in the array like so

const processObject = obj => Object.keys(obj).map(id => {
const answer = obj[id];

const answers = Array.isArray(answer) ? answer : [answer]
const answerObjectArray = answers.map(ans => ({
    answer: ans
}));

return {
    id: +id.substring(1),
    answers: answerObjectArray
    
}
});


const dataArray = [{
"q1": "5",
"q2": [
    "13",
    "12",
],
"q3": "test",
}];
const output = processObject(dataArray[0]);

console.log(output);

edited Sep 27, 2021 at 17:32

answered Sep 27, 2021 at 17:19

Reetesh Kumar

4522 silver badges9 bronze badges

Collectives™ on Stack Overflow

JavaScript modify Array of Objects and alter contained data

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related