js - incorporate an object into an array

Question

I have an array structured as follows:

const screens = [
  {
    name: 'John',
    options: {
      headerTitle: 'Book Title',
    },
  },
  {
    name: 'Bill',
    options: {
      headerTitle: 'Another title',
    },
  },
];

and a piece of data that I need to insert into the 'options:' above. The data I can reshape at will. It could be:

const header = {
    headerStyle: {
      borderBottomWidth: 0.5,
      borderColor: 'black',
    },
};

or

header2 = [
  {
    borderColor: 'red',
    borderWidth: 0.5,
  },
];

The end goal is to have:

const screens = [
      {
        name: 'John',
        options: {
          headerTitle: 'Book Title',
          headerStyle: {
            borderColor: 'red',
            borderWidth: 0.5,
        },
      },
      {
        name: 'Bill',
        options: {
          headerTitle: 'Another title',
          headerStyle: {
            bordercolor: 'red',
            borderWidth: 0.5,
        },
      },
    ];

I have been googling the spread operator but I don't seem to be able to get the two merged.

Phil · Accepted Answer · 2021-08-12 01:44:46Z

2

The idea is to map the existing array to a new one with your options merged

const screens = [{"name":"John","options":{"headerTitle":"Book Title"}},{"name":"Bill","options":{"headerTitle":"Another title"}}]

const header = {
  headerStyle: {
    borderBottomWidth: 0.5,
    borderColor: 'black'
  }
}

const merged = screens.map(screen => ({
  ...screen,
  options: {
    ...screen.options,
    ...JSON.parse(JSON.stringify(header))
  }
}))

console.log(merged)

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

One thing to note here is that without the JSON.parse(JSON.stringify(header)), each object in your array will share the same headerStyle object reference. There may be simpler ways to break the object references using spread syntax but given the potential dynamic nature of your object to be merged, using the JSON methods is a convenient catch-all.

edited Aug 12, 2021 at 1:44

answered Aug 12, 2021 at 1:37

Phil

166k25 gold badges265 silver badges269 bronze badges

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

3 Comments

Wasteland Over a year ago

Thanks. No, sharing the same obj reference is not an issue here.

nay Over a year ago

also can prevent object reference by extract using three dots ...

Phil Over a year ago

@nay then you'd need to know the structure of the object and OP says "The data I can reshape at will". It also gets fiddly when there are multiple properties

nay · Accepted Answer · 2021-08-12 01:40:34Z

1

if this could help you.
just loop the array and append headerStyle.the three dots means extract data,intend to prevent reference.

const screens = [
  {
    name: 'John',
    options: {
      headerTitle: 'Book Title',
    },
  },
  {
    name: 'Bill',
    options: {
      headerTitle: 'Another title',
    },
  },
];

const header = {
    headerStyle: {
      borderBottomWidth: 0.5,
      borderColor: 'black',
    },
};

screens.forEach(item=>{item.options['headerStyle']={...header.headerStyle}})

console.log(screens)

answered Aug 12, 2021 at 1:40

nay

1,7751 gold badge11 silver badges11 bronze badges

Collectives™ on Stack Overflow

js - incorporate an object into an array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related