从 Javascript 中的数组数组中获取不同的值

Question

我的数据格式如下..

    var data= [['typeName', 'valueName'], ['type1', 'value1'],
['type1', 'value2'],['type2', 'value3'],['type2', 'value4']]

我想将上面的数据转换成下面的数据..

    var resultdata=[{'typeName':'type1','valueName':['value1','value2']},
{'typeName':'type2','valueName':['value3','value4']}]

基本上我选择了不同的 'typeName' 值，然后将 'valueName' 值按 'typeName' 值分组。

我最好只使用 knockoutjs、lodash 或 underscorejs，因为我的解决方案已经在使用它们，但我也对其他解决方案持开放态度..

真诚感谢所有帮助

谢谢

Answer 1

给出的结果为：

var resultdata=[
    {'typeName':'type1'},{'valueName':['value1','value2']},
    {'typeName':'type2'},{'valueName':['value3','value4']}
]

我将调用 'typeName' 类别和 'valueName' 项目。

因为原始数据是这样的：

var data= [
    ['typeName', 'valueName'], 
    ['type1', 'value1'],
    ['type1', 'value2'],
    ['type2', 'value3'],
    ['type2', 'value4']
]

显然有规律可循。第一行数据是我们将用作类别和项目标签的内容。所有剩余数据表示在类别和项目中使用的值。

第一步是提取标签：

 var categoryLabel = data[0][0];
 var itemLabel = data[0][1];

接下来，需要确定唯一类别，因此我们将使用 reduce 构建一个唯一类别数组：

 var categories = data
     .filter(function(row, i) { return i > 0 }) // remove the labels
     .reduce(function(arrCategories, currRow) {
         // Add the current rows' category if it doesn't already exist
         var currCategory = currRow[0];
         if (arrCategories.indexOf(currCategory) === -1) {
           return arrCategories.concat(currCategory);
         }
         return arrCategories;
     }, [])

现在您有了一组类别，您只需遍历每个类别以找到属于它的所有项目：

 var valuesByCategory = {};
 categories.forEach(function(category) {
   // find all the data items that match the category
   var items = data
     .filter(function(row) { return row[0] === category; })
     .reduce(function(arrItems, currRow) {
       var currItem = currRow[1];
       if (arrItems.indexOf(currItem) === -1) {
          return arrItems.concat(currItem);
       }
       return arrItems;
     }, []);
   valuesByCategory[category] = items;
 });

现在所有的数据都已经解析出来了，唯一剩下要做的就是构建结果数组：

 var resultdata = [];
 // iterate through each of the categories
 categories.forEach(function(category) {
   // using the category label, output an object with the label and category
   var categoryObj = {};
   categoryObj[categoryLabel] = category;
   resultdata.push(categoryObj);


   // Next, create a items object containing all the values
   var itemsObj = {};
   itemsObj[itemLabel] = valuesByCategory[category];
   resultdata.push(itemsObj);
 }

就是这样:)

最好的部分是您不需要任何外部库。这就是全部 ES2015 javascript!

Answer 2

我认为这个使用下划线的解决方案应该可以解决问题：

var result= _.chain(data)
    .rest()
    .groupBy( value => value[0])
    .map( (value,key) => ({ [data[0][0]]: key, [data[0][1]]: _.map(value, val => val[1])}))
    .value();

此解决方案使用 rest to skip the first item in the data array (the type descriptors). The array is then grouped by the first value in the array (the type) and the mapping returns the grouping in the required form using es6 object initializer 表示法。

Answer 3

这是 Gruff Bunnies 解决方案的 lodash 版本：

var data= [['typeName', 'valueName'], ['type1', 'value1'], ['type1', 'value2'],['type2', 'value3'],['type2', 'value4']]
var names = data[0]
var values = _.tail(data)

console.log(JSON.stringify(
  _(values)
    .groupBy(0)
    .map( (value, key) => ({ [names[0]]: key, [names[1]]: _.map(value, 1)}) )
    .value()
))

https://jsfiddle.net/nmf1fdf5/

从 Javascript 中的数组数组中获取不同的值

getting distinct values from array of arrays in Javascript

javascript

underscore.js

knockout.js

lodash