How to destructure an array within an object and rename the variables created from it?

Question

I want to destructure the following object (simplified here):

export class Service = {
  ...
  details: {
    overview: [
      {
        title: {
          de: 'Mock Example',
          en: 'Mock Example',
        },
        description: {
          de: 'Lorem ipsum...',
          en: 'Lorem ipsum...',
        },
      },
      {
        title: {
          de: 'Mock Example 2',
          en: 'Mock Example 2',
        },
        description: {
          de: 'Lorem ipsum...',
          en: 'Lorem ipsum...',
        },
      },
    ],
    ...

I only want to have "service" on the right side and name the index 0 of the overview array "problem" and the index 1 of the overview array "solution" like this:

const { problem, solution } = service;

I've tried the following approach, but it doesn't work that way. And I don't quite understand how I can rename the variables to "problem" and "solution"?

  const { 
    details: { 
      overview[0]: { 
        ...
      }, 
    }, 
    details: {
      overview[1]: {
        ...
      }
    }
  } = service;

You can't use service alone on the right side and do what you're asking. You could do const [ problem, solution ] = service.details.overview; — Heretic Monkey
– Heretic Monkey, Commented Jan 13, 2021 at 13:37
AFAIK you can't rename on destructuring, and again, AFAIK, you can't destructure an object into an array or viceversa. — Emilio Grisolía
– Emilio Grisolía, Commented Jan 13, 2021 at 13:38
const { details: { overview: [problem, solution] } } = service; @EmilioGrisolía you can rename using destructuring const { id: ident } = { id: 1 }; declares and assigns obj.id to ident — pilchard
– pilchard, Commented Jan 13, 2021 at 13:39

Yevhen Horbunkov · Accepted Answer · 2021-01-13 13:45:00Z

4

I guess, that's what you're after:

const service = {
    details: {
        overview: [{
                title: {
                    de: 'Mock Example',
                    en: 'Mock Example',
                },
                description: {
                    de: 'Lorem ipsum...',
                    en: 'Lorem ipsum...',
                },
            },
            {
                title: {
                    de: 'Mock Example 2',
                    en: 'Mock Example 2',
                },
                description: {
                    de: 'Lorem ipsum...',
                    en: 'Lorem ipsum...',
                },
            },
        ]
    }
}
 
const {details: {overview: [problem, solution]}} = service
      
console.log(problem, solution)

edited Jan 13, 2021 at 13:45

answered Jan 13, 2021 at 13:40

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

How to destructure an array within an object and rename the variables created from it?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related