so i am working at making table row grouping using lodash groupby function and it works just fine by making this

var value = _.groupBy(itemData, groupkey)

so it will turn this raw data from api

itemData = {
  0: {
         name: 'article 1',
         category: 'news'
     },
  1: {
         name: 'article 2',
         category: 'lifestyle'
     },
  2: {
         name: 'article 3',
         category: 'news'
     }
}

to be like this

itemData = {
  news: 
     0: {
         name: 'article 1',
         category: 'news'
        },
     1: {
         name: 'article 3',
         category: 'news'
        }
  lifesyle:  
     0: {
         name: 'article 2',
         category: 'lifestyle'
     }
}

but when i have data api with no category data in database so it returned null or undefined, then it will be showing like this

itemData = {
  undefined: 
     0: {
         name: 'article 1',
         category: undefined
        },
     1: {
         name: 'article 3',
         category: undefined
        }
  lifesyle:  
     0: {
         name: 'article 2',
         category: 'lifestyle'
     }
}

so how to catch those undefined and change it to other word? like say change it into "uncategorized" or "other"?

update

okay, first of all i'm sorry i thought doing this will be the same when using vanila javascript and vue js... the truth is i am using this in vue js environment... and when i tried all of your answer i got a very different result

so in vue the code will be like this: i am calling this grouping in puted property

puter:{
 groupData(){
  retun _.groupBy(this.itemData.data, this.group.key);
 }
}

update 2 so after seeing my raw data from api, i am using laravel eloquent relationship in the backend code so it will return this kind of api

itemData = {
 0: {
      name: 'article 1',
      category_id : 1,
      category__article: {
        id: 1,
        name: 'news'
      }
    }
 1: {
      name: 'article 2',
      category_id : 2,
      category__article: {
        id: 2,
        name: 'lifestyle'
      }
    }
 2: {
      name: 'article 3',
      category_id : '',
      category__article: undefined
    }
}

and what inside this.group.key is category__article.name

so i am working at making table row grouping using lodash groupby function and it works just fine by making this

var value = _.groupBy(itemData, groupkey)

so it will turn this raw data from api

itemData = {
  0: {
         name: 'article 1',
         category: 'news'
     },
  1: {
         name: 'article 2',
         category: 'lifestyle'
     },
  2: {
         name: 'article 3',
         category: 'news'
     }
}

to be like this

itemData = {
  news: 
     0: {
         name: 'article 1',
         category: 'news'
        },
     1: {
         name: 'article 3',
         category: 'news'
        }
  lifesyle:  
     0: {
         name: 'article 2',
         category: 'lifestyle'
     }
}

but when i have data api with no category data in database so it returned null or undefined, then it will be showing like this

itemData = {
  undefined: 
     0: {
         name: 'article 1',
         category: undefined
        },
     1: {
         name: 'article 3',
         category: undefined
        }
  lifesyle:  
     0: {
         name: 'article 2',
         category: 'lifestyle'
     }
}

so how to catch those undefined and change it to other word? like say change it into "uncategorized" or "other"?

update

okay, first of all i'm sorry i thought doing this will be the same when using vanila javascript and vue js... the truth is i am using this in vue js environment... and when i tried all of your answer i got a very different result

so in vue the code will be like this: i am calling this grouping in puted property

puter:{
 groupData(){
  retun _.groupBy(this.itemData.data, this.group.key);
 }
}

update 2 so after seeing my raw data from api, i am using laravel eloquent relationship in the backend code so it will return this kind of api

itemData = {
 0: {
      name: 'article 1',
      category_id : 1,
      category__article: {
        id: 1,
        name: 'news'
      }
    }
 1: {
      name: 'article 2',
      category_id : 2,
      category__article: {
        id: 2,
        name: 'lifestyle'
      }
    }
 2: {
      name: 'article 3',
      category_id : '',
      category__article: undefined
    }
}

and what inside this.group.key is category__article.name

• javascript
• vue.js
• vuejs2
• lodash

4 Answers 4

This will do

 const groupData = _.groupBy(itemData, item => {
   return _.get(item, 'category__article.name', 'no_category');
 });

Using _.get to fetch nested value (item.category__article.name) and give default value (no_category) if the value is undefined.

_.get Documentation

const itemData = {
 0: {
      name: 'article 1',
      category_id : 1,
      category__article: {
        id: 1,
        name: 'news'
      }
    },
 1: {
      name: 'article 2',
      category_id : 2,
      category__article: {
        id: 2,
        name: 'lifestyle'
      }
    },
 2: {
      name: 'article 3',
      category_id : '',
      category__article: undefined
    }
}

const groupData = _.groupBy(itemData, item => _.get(item, 'category__article.name', 'no_category'));

console.log('groupData', groupData);

<script src="https://cdnjs.cloudflare./ajax/libs/lodash.js/4.17.5/lodash.js"></script>

Lodash groupBy method can accept a function as a parameter. So you can default the category value to 'other' as easy as this:

const itemData = {
  0: {
    name: "article 1",
    category: "news"
  },
  1: {
    name: "article 2",
    category: undefined
  },
  2: {
    name: "article 3",
    category: null
  }
};

const groupkey = "category";
const defaultCategory = "other";

var value = _.groupBy(itemData, item => {
  const value = item[groupkey];

  if (!value) {
    return defaultCategory;
  }

  return value;
});

/*
Returns: 
{
  news: [{ name: "article 1", category: "news" }],
  other: [
    { name: "article 2", category: undefined },
    { name: "article 3", category: null }
  ]
}
*/

paring the value directly, or (!t)

  if (t === undefined) {
     return 'Undefined value!';
  }

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined

You could first mapValues to change category value from null or undefined to uncategorized and then use groupBy on that new object.

const itemData = {0: {name: 'article 1',category: undefined},1: {name: 'article 2',category: null},2: {name: 'article 3', category: 'news'}}

const result = _.chain(itemData)
  .mapValues(o => {
    const category = 'uncategorized'
    return _.assign({}, o, !o.category && {category})
  }).groupBy('category').value()

console.log(result)

<script src="https://cdnjs.cloudflare./ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>