CODEWITHSUNDEEP
javascriptreactjs
user15404864
user15404864

Reputation:

Reactjs if conditions

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

Upvotes: 2

Views: 82

Answers (3)

Pranay Nailwal
Pranay Nailwal

Reputation: 542

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

Upvotes: 0

Majid M.
Majid M.

Reputation: 4954

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/

Upvotes: 1

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9893

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

Upvotes: 1

Related Questions