Is there any better way to refactor an array of objects in javascript?

Question

I have a an array of objects like this:

[{
    grade: 1,
    title: 'TitleA',
    code_no: 1,
    code_name: 'A',
    business_number: '',
    total_sales_count: 213,
    general_number: 0,
    resident_number: 20,
    address: '',
  },
  {
    grade: 2,
    title: 'TitleB',
    code_no: 1,
    code_name: 'A',
    business_number: '',
    total_sales_count: 300,
    general_number: 0,
    resident_number: 12,
    address: '',
  },
  {
    grade: 3,
    title: 'TitleC',
    code_no: 1,
    code_name: 'A',
    business_number: '',
    total_sales_count: 221,
    general_number: 0,
    resident_number: 9,
    address: '',
  },
  ...
]

and I was trying to refactor the objects like this:

 [{
    grade: 1,
    title: 'TitleA',
    type : {code_no: 1, code_name: 'A'},
    business_number: '',
    counts: {
      total_sales_count: 213,
      general_number: 0,
      resident_number: 20
    },
    address: '',
  },
  {
    grade: 2,
    title: 'TitleB',
    type: {code_no: 1, code_name: 'A'},
    business_number: '',
    counts: {
      total_sales_count: 300,
      general_number: 0,
      resident_number: 12
    },
    address: '',
  },
  {
    grade: 3,
    title: 'TitleC',
    type: {code_no: 1, code_name: 'A'},
    business_number: '',
    counts: {
      total_sales_count: 221,
      general_number: 0,
      resident_number: 9
    },
    address: '',
  },
  ...
]

So, in first time, I just used a map method like this

const test: any = data.map((i: any) => {
  const obj: any = {
    ...i,
    type: {
      code_no: i.code_no,
      code_name: i.code_name,
    },
     counts: {
      total_sales_count: i.total_sales_count,
      general_number: i.general_number,
      resident_number: i.resident_number
    },
  };

  return obj;
});

and tried to remove the duplicated data from the array, but I think it's not quite right approach to change the structure of the array...(because I have to change the data multiple times, not at once.)

I'm very new to javascript so I think there's more efficient way to restructure format but couldn't catch a clue. Is there any way to change the structure of an array of objects?

Answer 1

I don't think you can avoid using map or a loop to achieve what you want to do. Use map, but you should declare each property of the new object. Using ...i will keep all the old properties and will add the new ones too.

yourObjects.map((obj) => {
  return {
      grade: obj.grade,
      title: obj.title,
      type: {code_no: obj.code_no, code_name: obj.code_name },
      counts: {
          total_sales_count: obj.total_sales_count,
          general_number: obj.general_number,
          resident_number: obj. resident_number
      },
      address: obj.address,
  }
}

Answer 2

You can destructure only the properties you need to modify and for the rest of the default properties you can use the spread operator

also type: { code_no,code_name} is shorthand for type: { code_no: code_no,code_name: code_name}

let data  = [{    grade: 1,    title: 'TitleA',    code_no: 1,    code_name: 'A',    business_number: '',    total_sales_count: 213,    general_number: 0,   resident_number: 20,    address: '',  },  {   grade: 2,    title: 'TitleB',   code_no: 1,    code_name: 'A',    business_number: '',    total_sales_count: 300,    general_number: 0,    resident_number: 12,    address: '',  },  {    grade: 3,    title: 'TitleC',    code_no: 1,    code_name: 'A',    business_number: '',    total_sales_count: 221,    general_number: 0,    resident_number: 9,    address: '',  },]

const test = data.map(({code_no,code_name,total_sales_count,general_number,resident_number, ...defaultProps}) => {
  const obj = {
    ...defaultProps,
    type: { code_no,code_name},
    counts: {total_sales_count,general_number,resident_number},
  };
  return obj;
});

console.log(test)

Answer 3

Destructure the props that are meant to added to new objects, and capture the other properties with the rest syntax. Then create and return a new object.

const data=[{grade:1,title:"TitleA",code_no:1,code_name:"A",business_number:"",total_sales_count:213,general_number:0,resident_number:20,address:""},{grade:2,title:"TitleB",code_no:1,code_name:"A",business_number:"",total_sales_count:300,general_number:0,resident_number:12,address:""},{grade:3,title:"TitleC",code_no:1,code_name:"A",business_number:"",total_sales_count:221,general_number:0,resident_number:9,address:""}];

const out = data.map(obj => {
  
  const {
    code_no,
    code_name,
    total_sales_count,
    general_number,
    resident_number,
    ...rest
  } = obj;
  
  return {
    ...rest,
    type: {
      code_no,
      code_name
    },
    counts: {
      total_sales_count,
      general_number,
      resident_number
    }
  };

});

console.log(out);