Question

所以我正在使用lodash groupby函数制作表行分组，并且通过制作它可以正常工作

var value = _.groupBy(itemData, groupkey)

因此它将从api

转换此原始数据

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

就像这样

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

但是当我的数据api在数据库中没有类别数据因此它返回null或未定义时，它将显示为这样

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

那么如何抓住那些未定义并将其更改为其他单词？比如说把它改成“未分类”或“其他”？

更新

好吧，首先我很抱歉我认为在使用vanila javascript和vue js时这样做会是相同的...事实是我在vue js环境中使用这个...当我尝试所有的你的回答我得到了一个非常不同的结果

所以在vue中代码将是这样的：我在计算属性

中调用此分组

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

更新2 所以在从api看到我的原始数据之后，我在后端代码中使用了laravel雄辩的关系，所以它将返回这种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
    }
}

以及this.group.key内category__article.name

的内容

Answer 1

Lodash groupBy method可以接受函数作为参数。因此，您可以将类别值默认为“其他”，如下所示：

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 }
  ]
}
*/

Answer 2

直接比较值，或（！t）

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

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

Answer 3

您可以先mapValues将类别值从null或undefined更改为uncategorized，然后在该新对象上使用groupBy。

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 4

这样做

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

如果值未定义，则使用_.get获取嵌套值（item.category__article.name）并提供默认值（no_category）。

_.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.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>

为未定义

4 个答案: