如何避免 jquery 表中的重复字符串

Question

如何避免 jquery 表示例输出中的重复字符串是 here 我希望将问题合并到一个列中。预期的表（输出）看起来像this

var list=[
{q:'Question1',r:'response1',credit:4},
{q:'Question2',r:'response2',credit:9},
{q:'Question2',r:'response3',credit:3},
{q:'Question3',r:'response4',credit:8},
{q:'Question3',r:'response5',credit:9},
{q:'Question3',r:'response6',credit:3},
{q:'Question4',r:'response7',credit:7},
{q:'Question4',r:'response8',credit:9},
{q:'Question4',r:'response9',credit:3},
{q:'Question4',r:'response10',credit:1},
{q:'Question5',r:'response11',credit:5},
{q:'Question5',r:'response12',credit:3}
];
 

$.each(result, function (key,qstn) {
                        html += '<tr>';  
                        html += '<td>' + qstn.q+ '</td>'; 
                        html += '<td>' + qstn.response+ '</td>';
                        html += '</tr>';  
                        });
                });
                    $('.tbody').append(html);

Answer 1

试试这个

jQuery

$(document).ready(function(){
var list=[
{q:'Question1',r:'Response1',c:4},
{q:'Question2',r:'Response2',c:9},
{q:'Question2',r:'Response3',c:3},
{q:'Question3',r:'Response4',c:8},
{q:'Question3',r:'Response5',c:9},
{q:'Question3',r:'Response6',c:3},
{q:'Question4',r:'Response7',c:7},
{q:'Question4',r:'Response8',c:9},
{q:'Question4',r:'Response9',c:3},
{q:'Question4',r:'Response10',c:1},
{q:'Question5',r:'Response11',c:5},
{q:'Question5',r:'Response12',c:3}
];

var dupes = {};
var singles = [];
$.each(list, function(i, el) {
    if (!dupes[el.q]) {
        dupes[el.q] = true;
        singles.push(el);
    }
});

var html='';
$.each(singles,function(i,el){
var itemArr = $.grep(list, function (item, index) {
       return (item.q==el.q);
   });
   console.log(itemArr);
   
  
  $.each(itemArr,function(iitem,iindex){
  if(iitem==0){
  html += '<tr>';  
  html += '<td rowspan='+itemArr.length+'>' + iindex.q+ '</td><td>'+iindex.r+'</td><td>'+iindex.c+'</td>'; 
  
  html +='</tr>';
  }else{
  html += '<tr><td>' + iindex.r+ '</td><td>' + iindex.c+ '</td>';
  html += '</tr>';
  }
  });
   
})

 $('.tbody').append(html);  
});

HTML

<table border="1">
<thead>
<th>Question<th>Response<th>Count</th>
</thead>
<tbody class="tbody" >
</tbody>
</table>

Answer 2

我曾经是 jQuery 的坚定支持者——毕竟，它让我们有能力为 JavaScript 功能有限的各种不同浏览器编写简短而有意义的代码。然而，世界已经在发展，我们的“现代”浏览器现在支持许多长期以来只能在 jQuery 中找到的功能。

所以，这是我对没有 jQuery 的答案的看法：

var list=[
{q:'Question1',r:'Response1',c:4},
{q:'Question2',r:'Response2',c:9},{q:'Question2',r:'Response3',c:3},
{q:'Question3',r:'Response4',c:8},{q:'Question3',r:'Response5',c:9},{q:'Question3',r:'Response6',c:3},
{q:'Question4',r:'Response7',c:7},{q:'Question4',r:'Response8',c:9},{q:'Question4',r:'Response9',c:3},{q:'Question4',r:'Response10',c:1},
{q:'Question5',r:'Response11',c:5},{q:'Question5',r:'Response12',c:3}
];
list.cnts=list.reduce((a,c)=>(a[c.q]=(a[c.q]||0)+1,a),{}) // calculate rowcounts first

document.querySelector(".tbody").innerHTML=list.map(e=>
  ( e.q!==list.prev && (list.prev=e.q) // not the same question as before?
           ?'<td'+(list.cnts[e.q]>1?' rowspan="'+list.cnts[e.q]+'"':'')+'>'+e.q+'</td>'
           :'' 
  ) + '<td>'+e.r+'</td><td>'+e.c+'</td>'
 ).join('</tr>\n<tr>'); 

<table border="1">
<thead>
<th>Question<th>Response<th>Count</th>
</thead>
<tbody class="tbody" >
</tbody>
</table>

我觉得这条线

 e.q!==list.prev && (list.prev=e.q)

值得进一步解释。请记住，JavaScript 以“惰性”方式从左到右计算布尔表达式。这意味着如果第一项被评估为false，它将停止评估&&-表达式。所以经过测试是否e.q!==list.prev i. e.如果当前问题与可能存储的“上一个”问题不同，则取决于实际结果，是否会执行第二部分(list.prev=e.q)。有两种可能的情况：

• e.q!==list.prev 是 true：这意味着当前问题是一个“新”问题。现在将执行第二个表达式，i。 e.属性list.prev 将接收当前问题e.q 的值，组合表达式的整体结果为true（作为问题值e.q，只要它超过一个空字符串，就会被评估作为“真实”）。
• e.q!==list.prev 是false：当前问题与（存储的）上一个问题完全相同。第二个表达式将不再执行，组合表达式将返回值false

这个组合表达式值现在决定是否为第一列插入<td> 元素。如果它有多个答案，它还将包含一个'rowspan="'+list.cnts[e.q]+'"' 属性，使其跨越多行。