Underscore.js筛选出唯一的值

问题描述

这是到我的小提琴

我有一个从Ajax响应中获得的JSON动态创建的表。

表中有重复的条目。例如 xxx，xxx 。
我想对它们进行分组，并使它像< td data-count =some count> xxx< / td>

我尝试使用 underscore.js ，但它似乎打破了 rowspan 功能。

我使用 _countBy（arr）将 arr $ c $>，并且我获得了以下格式的对象。

{xxx：2，zzz：1}

问题：如何修改 generateTable（）函数以适应此更改。我尝试按以下方式修改它：

  var i = 0; 
 
 $ .each（queryObject，function（key，value）{
 if（i == 0）{
 i ++; 
 childrenHtml + =（'< td rowspan =1data-count =''+ value +'>'+ key +'< / td>'+'< / tr>'）; 
} 
 else { 
 childrenHtml + =（'< tr>< td rowspan =1data-count =''+ value +'>'+ key +'< / td>'+'< / tr> ;'）; 
} 
}）; 
  

但是rowspan似乎是现在的问题。我如何修改这个？

解决方案

您需要像这样做功能来转换您的数据并对其进行分组：

  _.chain（data.result）
 .keys（）//获取所有键buildname1 buildname2..etc 
 .flatten（）
 .each（function（key）{//为每个键做一次映射并返回一个分组
 data.result [key] = _.chain（data.result [ map（function（d）{
 var key = _.chain（d）.keys（）。first（）。value（）; 
 var ob = {} ; 
 ob [key] = _.chain（d）.values（）。flatten（）。groupBy（）。value（）; //按值分组
 return ob; 
} ）.value（）; 
}）.value（）; 
  

这会将您的数据集转换为以下格式：

  {
buildname1：[
 {
table1：{
xxx：[
 xxx
]，
zzz：[
zzz，
zzz
] 
} 
}，
 {
table2：{
xxx：[
xxx
]，
yyy：[
yyy 

} 
} 
]，
buildname2：[
 {
table1：{
 xxx：[
xxx，
xxx
]，
zzz：[
zzz
] 
 } 
 b 
 
 $ xxx $ b $ xxx 
 $ xxx 
 $ 
} 
}，
 {
table3：{
xxx：[
xxx
]，
yyy： [
yyy
] 
} 
} 
] 
} 
  

然后，您需要更改用于制作表格和计算rowspan的biz逻辑。

工作代码

Here is a link to my Fiddle

I have a table that is created dynamically from the JSON obtained from a Ajax response.

I have duplicate entries in the table. For example xxx,xxx.I want to group them and have it like <td data-count="some count">xxx</td>

I tried using underscore.js but it seems to break the rowspan functionality.

I converted the arr into a object using _countBy(arr) and I obtained an object of the following format.

{xxx: 2, zzz: 1}

Question : How can I modify the generateTable() function to accommodate this change. I tried to modify it the following way

var i=0;

$.each(queryObject,function(key,value){
   if(i == 0){
       i++;
       childrenHtml += ('<td rowspan="1" data-count="'+value+'">' + key + '</td>' + '</tr>');
   }
   else{
    childrenHtml += ('<tr><td rowspan="1" data-count="'+value+'">' + key + '</td>' + '</tr>');
   }
});

But the rowspan seems to be problem now. How can I modify this?

解决方案

You will need to make function like this to convert your data and group it:

  _.chain(data.result)
    .keys()//get all the keys buildname1 buildname2..etc
    .flatten()
    .each(function(key) {//for each key do a mapping and return a grouping.
      data.result[key] = _.chain(data.result[key]).flatten().map(function(d) {
        var key = _.chain(d).keys().first().value();
        var ob = {};
        ob[key] = _.chain(d).values().flatten().groupBy().value();//grouping by value
        return ob;
      }).value();
    }).value();

This will convert your data set into this format:

{
   "buildname1":[
      {
         "table1":{
            "xxx":[
               "xxx"
            ],
            "zzz":[
               "zzz",
               "zzz"
            ]
         }
      },
      {
         "table2":{
            "xxx":[
               "xxx"
            ],
            "yyy":[
               "yyy"
            ]
         }
      }
   ],
   "buildname2":[
      {
         "table1":{
            "xxx":[
               "xxx",
               "xxx"
            ],
            "zzz":[
               "zzz"
            ]
         }
      },
      {
         "table2":{
            "xxx":[
               "xxx",
               "xxx"
            ]
         }
      },
      {
         "table3":{
            "xxx":[
               "xxx"
            ],
            "yyy":[
               "yyy"
            ]
         }
      }
   ]
}

Then you will need to change the biz logic for making table, and calculating rowspan.

working code here

这篇关于Underscore.js筛选出唯一的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！