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