Conditional destructuring array of objects es6

Question

stackblitz: demo

The idea is the server sends a response in the below format, based on the following conditions needs to decide to show or hide the button on a page and each button has individual click functions. that's what I have static declare the button in a page.

I have below an array of objects. I need to map the object's properties to other properties with some conditions.

collections = [
  {
    "productId": "samsung",
    "productParams": "",
    "isAvailable": true
  },
  {
    "productId": "nokia",
    "productParams": "",
    "isAvailable": true
  },
  {
    "productId": "Lg",
    "productParams": "",
    "isAvailable": false
  },
]

Here is a collection array of objects. Here I try to map the object's properties based on two conditions,

if productId value matches 'string' and isAvailable property is true I have assigned to a global variable and show the button. But it works wrong. Anyone help the code what I did wrong.

getClick() {
  let showButtonSamsung, showButtonNokia, showButtonLg;
  let x = this.collections.map(x => {
    showButtonSamsung = x.productId == 'samsung' && x.isAvailable == true ? true : false;
    showButtonNokia = x.productId =='nokia' && x.isAvailable == true ? true : false;
    showButtonLg = x.productId == 'Lg' && x.isAvailable == true ? true : false;
  });
}

expected O/P:

showButtonSamsung: true  // will show the button
showButtonNokia: true  // will show the button
showButtonLg: false  // hide the button

"Mapping" means producing a new array. You're basically just looping, and storing the results from your last iteration in the global variables. What do you actually want as the result? — Bergi
– Bergi, Commented May 12, 2020 at 19:34
I don't see what this question has to do with destructuring, es6, or es7. — Bergi
– Bergi, Commented May 12, 2020 at 19:35
what is the problem you are facing here ? and what you are getting according to ur logic ? — Dcoder14
– Dcoder14, Commented May 12, 2020 at 19:40
Why are you not iterating through collection and setting the status of button based on isAvailable property? You can map this and assign to your three variable. — Hassan Imam
– Hassan Imam, Commented May 12, 2020 at 19:42
@bergi , you are correct ,I am not doing destructing here ,just map and assign last iteration to global variables.still stuck in the code and es6 destructing object concepts — Mohamed Sahir
– Mohamed Sahir, Commented May 12, 2020 at 19:47

Józef Podlecki · Accepted Answer · 2020-05-12 19:47:30Z

2

I think reduce would be much better in this case.

let collections = [{
    "productId": "samsung",
    "productParams": "",
    "isAvailable": true
  },
  {
    "productId": "nokia",
    "productParams": "",
    "isAvailable": true
  },

  {
    "productId": "Lg",
    "productParams": "",
    "isAvailable": false
  }
]


const map = {
  samsung: "showButtonSamsung",
  nokia: "showButtonNokia",
  Lg: "showButtonLg"
}

const {showButtonSamsung, showButtonNokia, showButtonLg} = collections.reduce((acc, obj) => {
  const property = map[obj.productId];
  acc[property] = obj.isAvailable;
  return acc;
}, {})

console.log(showButtonSamsung, showButtonNokia, showButtonLg);

answered May 12, 2020 at 19:47

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

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

Comments

koalaok · Accepted Answer · 2020-05-12 20:38:46Z

1

I think this is more or less what you're looking for:

 const collections = [
    {
        "productId": "samsung",
        "productParams": "",
        "isAvailable": true
    },
    {
        "productId": "nokia",
        "productParams": "",
        "isAvailable": true
    },

    {
        "productId": "Lg",
        "productParams": "",
        "isAvailable": false
    }];

let isAvailable = (brand, collections) => collections.some((x) => x.productId === brand && x.isAvailable) 

let x = {
    showButtonSamsung: isAvailable('samsung', collections),
    showButtonNokia: isAvailable('nokia', collections),
    showButtonLg: isAvailable('Lg', collections),
}
console.log(x);

Another option :

let x = {
    showButtonSamsung: 'samsung',
    showButtonNokia: 'nokia',
    showButtonLg: 'Lg',
}


let isAvailable = (brand, collections) => collections.some((x) => x.productId === brand && x.isAvailable)
x = Object.entries(x).map(([key, value]) => ([key, isAvailable(value, collections)]))
    .reduce((obj, arr) => ({
        ...obj, [arr[0]]: arr[1]
    }), {})

console.log(x);

edited May 12, 2020 at 20:38

answered May 12, 2020 at 19:49

koalaok

5,85012 gold badges64 silver badges96 bronze badges

1 Comment

Patrick Roberts Over a year ago

array.some(...) would be better than array.find(...) !== undefined

Collectives™ on Stack Overflow

Conditional destructuring array of objects es6

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related