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?

destructuring and rest operator will help

cmgchess
– cmgchess

2022-05-15 15:13:53 +00:00
Commented May 15, 2022 at 15:13 — cmgchess
– cmgchess, Commented May 15, 2022 at 15:13
I know there's a duplicate for this but I can't find it.

pilchard
– pilchard

2022-05-15 15:22:00 +00:00
Commented May 15, 2022 at 15:22 — pilchard
– pilchard, Commented May 15, 2022 at 15:22

Andy · Accepted Answer · 2022-05-15 15:26:11Z

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

cmgchess · Accepted Answer · 2022-05-15 15:27:21Z

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)

rb27 · Accepted Answer · 2022-05-15 15:28:09Z

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

answered May 15, 2022 at 15:28

rb27

1813 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related