How do I deconstruct this object of objects of objects into object of objects?

Question

I have let's say this object

const obj = {
  background: {
   backgroundColor:{
    background: '#ffffff'
   },
   backgroundImage:{
    background: 'url(...)'
   }
  },
 header:{
  logo:{
   width: '100%'
  },
  title:{
   color: '#000000'
  }
 }
}

And I need to deconstruct it into something like this:

const deconstructedObj = {
   backgroundColor:{
    background: '#ffffff'
   },
   backgroundImage:{
    background: 'url(...)'
   },
   logo:{
    width: '100%'
  },
   title:{
    color: '#000000'
  }
}

This is just an example, my objects are bigger, but idea is the same, first keys need to be deconstructed, how do I do that?

Maybe the way to look at it is the first keys need to be removed — Kinglish
– Kinglish, Commented Jul 13, 2021 at 18:16

Kinglish · Accepted Answer · 2021-07-13 18:14:05Z

2

This would get you there, since you only want the values of the outer objects. Object.values will grab those inner objects into an iterable array and array.reduce() will help concatenate them all into a single object result

Object.values(obj).reduce( (b,a) => ({...b, ...a}),{})

const obj = {
  background: {
    backgroundColor: {
      background: '#ffffff'
    },
    backgroundImage: {
      background: 'url(...)'
    }
  },
  header: {
    logo: {
      width: '100%'
    },
    title: {
      color: '#000000'
    }
  }
}
const decon = Object.values(obj).reduce( (b,a) => ({...b, ...a}),{})
console.log(decon)

edited Jul 13, 2021 at 18:14

answered Jul 13, 2021 at 18:08

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

Comments

SnippyDippy · Accepted Answer · 2021-07-13 18:20:39Z

0

If you need only certain keys, or your needed keys are nested at various levels, you can try something like this:

const obj = {
  background: {
   backgroundColor:{
    background: '#ffffff'
   },
   backgroundImage:{
    background: 'url(...)'
   }
  },
 header:{
  logo:{
   width: '100%'
  },
  title:{
   color: '#000000'
  }
 }
}


const { background: { backgroundColor, backgroundImage }, header: { logo, title } } = obj;

const destructuredObj = {
  backgroundColor,
  backgroundImage,
  logo,
  title
}

console.log(destructuredObj)

answered Jul 13, 2021 at 18:20

SnippyDippy

1031 silver badge6 bronze badges

Collectives™ on Stack Overflow

How do I deconstruct this object of objects of objects into object of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related