Change structure of JavaScript array

Question

I am a beginner in javascript and i have a little problem. i want to change the structure of array for rendering in React Native using section List,

I got this JSON from Web Api

[
  {
    title: "Test",
    c: 1,
    d: 2,
  },
  {
    title: "Test",
    c: 3,
    d: 4,
  },
  {
    title: "Test",
    c: 5,
    d: 6,
  },
  {
    title: "Test01",
    c: 1,
    d: 2,
  },
  {
    title: "Test01",
    c: 3,
    d: 4,
  },
  {
    title: "Test01",
    c: 5,
    d: 6,
  },
  {
    title: "Test02",
    c: 1,
    d: 2,
  },
  {
    title: "Test02",
    c: 3,
    d: 4,
  },
  {
    title: "Test02",
    c: 5,
    d: 6,
  },
];

And I want to change this JSON like this

[
  {
    title: "Test",
    data: [
      { c: 1, d: 2 },
      { c: 3, d: 4 },
      { c: 5, d: 6 },
    ],
  },
  {
    title: "Test01",
    data: [
      { c: 1, d: 2 },
      { c: 3, d: 4 },
      { c: 5, d: 6 },
    ],
  },
  {
    title: "Test02",
    data: [
      { c: 1, d: 2 },
      { c: 3, d: 4 },
      { c: 5, d: 6 },
    ],
  },
];

it is very much useful to solve my question, but It Does not answer my question, i need as same as what i mentioned above, if i get like that only i can rendered using section List. And thanks buddy..! for the quick Response — sanjaySLM, Dec 08 '21 at 05:19
Becouse of question is closed check my [solution](https://replit.com/@8497715/reformat-object#index.js) — A1exandr Belan, Dec 08 '21 at 05:29

score 0 · Answer 1 · answered Dec 08 '21 at 05:04

It would be simpler to key your data to the test name, but you can achieve what you want by mapping your array like this:

let new_array=[];
your_array.forEach(elem => {
  let title = elem.title;
  let matchingIndex = newArray.findIndex(a => a.title = title);
  if (matchingIndex === -1) {
    new_array.push({title}
    matchingIndex = new_array.length - 1;
  }
let dataColumns = ['c', 'd'];
let data = {};
dataColumns.forEach(col => {
 data[col] = elem[col];
});
if (!Array.isArray(new_array[matching_index].data)) {
  isArray(new_array[matching_index].data = [];
}
new_array[matching_index].data.push(data);
});

score 0 · Answer 2 · answered Dec 08 '21 at 05:04

You can perform reduce operation in the array and get the desired format.

const items = [
  {
    title: "Test",
    c: 1,
    d: 2,
  },
  {
    title: "Test",
    c: 3,
    d: 4,
  },
  {
    title: "Test",
    c: 5,
    d: 6,
  },
  {
    title: "Test01",
    c: 1,
    d: 2,
  },
  {
    title: "Test01",
    c: 3,
    d: 4,
  },
  {
    title: "Test01",
    c: 5,
    d: 6,
  },
  {
    title: "Test02",
    c: 1,
    d: 2,
  },
  {
    title: "Test02",
    c: 3,
    d: 4,
  },
  {
    title: "Test02",
    c: 5,
    d: 6,
  },
];

const formatted = items.reduce((carry, current) => {
    // generating the placeholder format to put the data 
    if(!carry.hasOwnProperty(current.title)) {
      carry[current.title] = {
        title: current.title,
        data: []
      };
    }
    // Setting the data in unique name
    carry[current.title].data.push({ c: current.c, d: current.d });
    return carry;
}, []);
// formatted will have key value pair
console.log(Object.values(formatted));

score 0 · Answer 3 · answered Dec 08 '21 at 05:06

A reduce function to accumulate the result in an array:

const raw = [{
    title: 'Test',
    c: 1,
    d: 2,
  },
  {
    title: 'Test',
    c: 3,
    d: 4,
  },
  {
    title: 'Test',
    c: 5,
    d: 6,
  },
  {
    title: 'Test01',
    c: 1,
    d: 2,
  },
  {
    title: 'Test01',
    c: 3,
    d: 4,
  },
  {
    title: 'Test01',
    c: 5,
    d: 6,
  },
  {
    title: 'Test02',
    c: 1,
    d: 2,
  },
  {
    title: 'Test02',
    c: 3,
    d: 4,
  },
  {
    title: 'Test02',
    c: 5,
    d: 6,
  },
];

const result = raw.reduce((acc, {
  title,
  ...data
}) => {
  const index = acc.findIndex((elem) => title === elem.title);
  if (index === -1) acc.push({
    title,
    data: [data]
  });
  else acc[index].data.push(data);
  return acc;
}, []);
console.log(result);

score 0 · Answer 4 · answered Dec 08 '21 at 05:07

const input =[
  {
    title: "Test",
    c: 1,
    d: 2,
  },
  {
    title: "Test",
    c: 3,
    d: 4,
  },
  {
    title: "Test",
    c: 5,
    d: 6,
  },
  {
    title: "Test01",
    c: 1,
    d: 2,
  },
  {
    title: "Test01",
    c: 3,
    d: 4,
  },
  {
    title: "Test01",
    c: 5,
    d: 6,
  },
  {
    title: "Test02",
    c: 1,
    d: 2,
  },
  {
    title: "Test02",
    c: 3,
    d: 4,
  },
  {
    title: "Test02",
    c: 5,
    d: 6,
  },
];
let result = {};
input.forEach((e)=>{
  if(!result[e.title]){
  result[e.title] = {data:[]};
}
  result[e.title]['data'].push({ c:e.c, d:e.d});
});
let restructured =[];
Object.keys(result).forEach((key)=>{
  restructured.push({
    title: key, data:result[key].data
})
});
console.log(restructured)

score 0 · Answer 5 · answered Dec 08 '21 at 05:24

var data = [
    {
      title: "Test",
      c: 1,
      d: 2,
    },
    {
      title: "Test",
      c: 3,
      d: 4,
    },
    {
      title: "Test",
      c: 5,
      d: 6,
    },
    {
      title: "Test01",
      c: 1,
      d: 2,
    },
    {
      title: "Test01",
      c: 3,
      d: 4,
    },
    {
      title: "Test01",
      c: 5,
      d: 6,
    },
    {
      title: "Test02",
      c: 1,
      d: 2,
    },
    {
      title: "Test02",
      c: 3,
      d: 4,
    },
    {
      title: "Test02",
      c: 5,
      d: 6,
    },
  ];
console.log('data',data)

function analyse(data){
    var tmp = {}
    for(let item of data){
      if(tmp[item.title]){
          tmp[item.title].data.push({c:item.c,d:item.d})
      }else{
          tmp[item.title] ={
              data: [{c:item.c,d:item.d}]
          }
  
      }
    }
    console.log('tmp',tmp)
  var results = []
    for(let key in tmp){
      results.push({title:key,data:tmp[key].data})
    }
    console.log('results',JSON.stringify(results))
  return results
}

analyse(data)

Change structure of JavaScript array

5 Answers5