Destructure multiple keys to the same variable name

user_5609501 0
Viewed 58

I get a response from multiple APIs with relatively the same object structure but key names might vary as example:

response1 = {name:"Something", image:"path_to_image", ...}
response2 = {title:"Something", image:"path_to_image", ...}
response3 = {label:"Something", image:"path_to_image", ...}

I want to destructure those objects to the same variable name:

const {name|title|label: title, ...rest} = response

in order to use it in the component without the need for multiple checks for object keys like this as example:

const title = response?.title || response?.name || response?.label;

Can it be done with destructure directly or any one line solution?

destructuring javascript
3 Answers

Using reduce with a list of expected keys would allow you to find the first of any used. This makes it dynamic over the foo.title ?? foo.name... type approach, which might be useful.

You could of course wrap this into a function for reuse, and to make it a one liner that is self-describing.

response1 = {name:"Something name", image:"path_to_image", }
response2 = {title:"Something title", image:"path_to_image", }
response3 = {label:"Something label", image:"path_to_image", }

const result = [ response1, response2, response3 ].map(response => {
    return {
        name: [ 'name', 'title', 'label' ].reduce((acc, key) => acc ?? response[key], undefined),
        image: response.image,
    }
})

console.log(result)

user_3275980

You could do something weird with default initialisers:

const {name, label=name, title=label, ...rest} = response;
// or
const {name, label, title = name ?? label, ...rest} = response;

Notice however that this will also declare the variables name and label. Your one-line solution is much cleaner and better to understand:

const title = response.title ?? response.name ?? response.label;

Alternatively, if you really have a lot of properties, you might want to loop:

const key = ['name', 'title', 'label', 'subject', 'content', 'body'].find(key => key in response);
const {[key]: title, ...rest} = response;
user_10485720

There is not really a simple destructuring technique available. At least I can't think of any.

const arr=[
 {name: "Something1", image:"path_to_image1",xtra:"property"},
 {title:"Something2", image:"path_to_image2",something:"else"},
 {label:"Something3", image:"path_to_image3",here:"too"}];
 
const res=arr.map(o=>{
 let t=o.name||o.title||o.label;
 t={name:t, ...o};
 delete t.title;
 delete t.label;
 return t;
})
console.log(res);

user_26100610
Related