Reactjs if conditions

Question

How can I control the loop in reactjs? I just want that if the label or Group is equal it will not be displayed

generateAvailableOptions(data){
    const availableGroups = [];
    data.map(function(food){
        availableGroups.push({
                label: food.Group,
                options: [
                    { value: 'canAdd'+food.groupsid, label: food.description}
                ],
        })
    });
    this.setState({availableGroups: availableGroups})
}

The actual result

   Vegetables:
         Carrots
   Vegetables:
         Cabbage
   Vegetables:
         Potato
   Fruits:
         Mango
   Fruits:
         Apple
   Fruits:
         Pineapple

This is what I want results:

   Vegetables:
         Carrots
         Cabbage
         Potato
   Fruits:
         Mango
         Apple
         Pineapple

whta is structure of Vegetables: Carrots Vegetables: Cabbage Vegetables: Potato is it object? or array of object? — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 24, 2021 at 8:27
Can you share value of data in its format. I mean the data you got form db — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 24, 2021 at 8:33

Majid M. · Accepted Answer · 2021-07-24 09:09:13Z

Here's the code:

const data = [
            {Group:'vegetable',description:'Carrots',groupsid:1},        
            {Group:'vegetable',description:'Cabbage',groupsid:1},
            {Group:'vegetable',description:'Potato',groupsid:1},       
            {Group:'fruit',description:'Mango',groupsid:2},        
            {Group:'fruit',description:'Apple',groupsid:2}
          ]
generateAvailableOptions(data){
    const result = data.reduce((item,curr)=> {
               if(!item[curr.Group]) item[curr.Group] = [];
                item[curr.Group].push({value: 'canAdd'+curr.groupsid, label: curr.description});
                return item;
            },{});
    
    const availableGroups = [];
    Object.entries(result).forEach(entry => {
      const [key, value] = entry;
        availableGroups.push({
        "label":key,
        "options": value
      })
    });
   this.setState({availableGroups: availableGroups});
}

You can see the result : https://es6console.com/krhjx0rz/

Alireza Ahmadi · Accepted Answer · 2021-07-24 08:59:51Z

1

If I understand correctly you need to group by your array based on keys.

You can use Object.keys to get key of all object and then check to see if exists or not. if exists push new value if not assign to current array value.

So try this one:

var data = [{ "Vegetables": "Carrots" }, { "Vegetables": "Cabbage" }, { "Vegetables": "Potato", }, { "Fruits": "Mango" }, { "Fruits": "Apple" },{ "Fruits": "Pineapple" }]


var obj = {};

for (let a in data) {
    let keys = Object.keys(data[a]);
    for (var i = 0; i < keys.length; i++) {
        if (obj[keys[i]])
            obj[keys[i]].push(data[a][keys[i]])
        else
            obj[keys[i]] = [data[a][keys[i]]];
    }
    
}
console.log(obj);

answered Jul 24, 2021 at 8:59

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

Comments

Pranay Nailwal · Accepted Answer · 2021-07-24 09:15:26Z

var data = [
  { Group: "Veg", description: "potato", groupsid: 1 },
  { Group: "Veg", description: "cucumber", groupsid: 1 },
  { Group: "Fruit", description: "tomato", groupsid: 2 }
];
function generateAvailableOptions(data) {
  const distinctFoodObjs = [];
  // eslint-disable-next-line
  data.map((item) => {
    var findItem = distinctFoodObjs.find((x) => x.Group === item.Group);
    if (!findItem) distinctFoodObjs.push({ label: item.Group, options: [] });
  });
  // eslint-disable-next-line
  data.map((food) => {
    // eslint-disable-next-line
    distinctFoodObjs.map((arrElem) => {
      if (arrElem.label === food.Group) {
        arrElem.options.push({
          value: "canAdd" + food.groupsid,
          label: food.description
        });
      }
    });
  });
  console.log(distinctFoodObjs);
}
generateAvailableOptions(data);

Collectives™ on Stack Overflow

Reactjs if conditions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related