Question

我有像这样的二维数组

 var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];

但是在html中我想渲染这个数组，如

**Names**   **Numbers**

  alex   => 2,4,6
  jhon   => 11,13

Answer 1

您可以使用reduce()返回对象，然后使用Object.keys()和forEach循环添加到HTML

＆＃13;

var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];
var result = items.reduce(function(r, e) {
  r[e[0]] = (r[e[0]] || []).concat(e[1]);
  return r;
}, {});

var rows = '';
Object.keys(result).forEach(function(e) {
  rows += '<tr><td>' + e + '</td><td>' + result[e].join(',') + '</td></tr>';
});

document.querySelector('table tbody').innerHTML += rows;

＆＃13;

<table>
  <tbody>
    <tr><td>Names</td><td>Numbers</td></tr>
  </tbody>
</table>

＆＃13;

Answer 2

我提出了一种jQuery方法（这不是最好的解决方案，只是一种不同的观点），而不是简化和数组分组：

＆＃13;

$(function () {
  var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];
  $.each(items, function(indexInArray, value) {
    var cellIfExist = $('#result').find('td:contains(' + value[0] + ')');
    if (cellIfExist.length > 0) {
      cellIfExist.next().text(cellIfExist.next().text() + ', ' + value[1]);
    } else {
      $('#result').append('<tr><td>' + value[0] + '</td><td>' + value[1] + '</td></tr>')
    }
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<table id="result">
    <tr>
        <td>**Names**</td>
        <td>**Numbers**</td>
    </tr>
</table>

＆＃13;

Answer 3

好吧，老派的方式可能是迭代数组，同时这样做可以构建一个与关联数组非常相似的对象。

 var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]];
 var group = { }

 for(var i = 0; i < items.length; i++) {
    var pair = items[i];
    if(group[pair[0]]) {
    group[pair[0]].push(pair[1]);
  }
 else {
    group[pair[0]] = [pair[1]];
  }
}

＆＃34;组＆＃34;然后是你的分组对象。使用for循环迭代它。

Answer 4

使用Array.forEach函数的简单解决方案：

var items = [['alex',2],['alex',4],['alex',6],['jhon',11],['jhon',13]],
    names = {};
items.forEach(function (arr) {
    (names[arr[0]])? names[arr[0]].push(arr[1]) : (names[arr[0]] = [arr[1]]);
});
    
console.log(JSON.stringify(names, 0, 4));

通过Javascript 2d数组过滤

4 个答案: