for循环中特定元素的Javascript数组组

Question

我目前有一些代码显示一些基于 MySQL 查询的 html。在我当前的查询中，我只选择带有MAX(ID)（每个数组元素中的第一项）的不同行。我现在正在寻找扩展它，我的数组现在看起来像这样：

var fullcheckins = [["3835","101 Pub","40.8684","-74.0223"],
                    ["2182","101 Pub","40.8684","-74.0223"],
                    ["2181","101 Pub","40.8684","-74.0223"],
                    ["1574","101 Pub","40.8684","-74.0223"],
                    ["1573","101 Pub","40.8684","-74.0223"],
                    ["1572","101 Pub","40.8684","-74.0223"],
                    ["1269","101 Pub","40.8684","-74.0223"],
                    ["1230","101 Pub","40.8684","-74.0223"],
                    ["221","101 Pub","40.8684","-74.0223"],
                    ["220","101 Pub","40.8684","-74.0223"],
                    ["697","113th St. Beach, LBI","39.5938","-74.2145"],
                    ["2838","14th Star Brewery and Taproom","44.8145","-73.0817"],
                    ["2844","14th Star Brewing Co","44.8201","-73.0854"],
                    ["2842","14th Star Brewing Co","44.8201","-73.0854"],
                    ["2841","14th Star Brewing Co","44.8201","-73.0854"],
                    ["2840","14th Star Brewing Co","44.8201","-73.0854"]];

我想要的是某种方法来分隔每一行，其中 fullcheckins 中的每个元素都是相同的，并将它们组合在一起。如果有帮助，则数组是有序的。这是我所期待的：

for (var i = 0; i < checkins.length; i++) {
  var checkin = checkins[i];
  var htmlscript = '<div id="slideShowImages">'
  for each time checkin[2] is the same:
      htmlscript += '<img src="pictures/'+checkin[0]+'.jpg"/>'
  htmlscript += '</div>'

最后，我应该使用多个 htmlscript 变量多次遍历 for 循环，如下所示：

  htmlscript = '<div id="slideShowImages">
                  <img src="pictures/3835.jpg"/>
                  <img src="pictures/2182.jpg"/>
                  <img src="pictures/2181.jpg"/>
                  <img src="pictures/1574.jpg"/>
                  <img src="pictures/1573.jpg"/>
                  <img src="pictures/1572.jpg"/>
                  <img src="pictures/1269.jpg"/>
                  <img src="pictures/1230.jpg"/>
                  <img src="pictures/221.jpg"/>
                  <img src="pictures/220.jpg"/>
                </div>'

有什么办法吗？

Answer 1

一种选择是在渲染之前重新排列您的fullcheckins。比如：

var groups = fullcheckins.reduce(function (groups, checkin) {
  var groupBy = checkin[2];
  if (!groups.hasOwnProperty(groupBy)) {
    groups[groupBy] = [];
  }
  groups[groupBy].push(checkin)
  return groups
}, {})

然后你会得到类似的东西

{
  40.8684: Array[10],
  39.5938: Array[1],
  44.8145: Array[1],
  44.8201: Array[4]
}

Answer 2

我相信这就是你要找的。​​p>

1) 首先构建一个跟踪每次出现的 id 的结果对象

2) 现在我们有了一个索引映射到 ids 的对象

3) 为每一个编写适当的 html

var results = {}

var fullcheckins = [
  ["3835", "101 Pub", "40.8684", "-74.0223"],
  ["2182", "101 Pub", "40.8684", "-74.0223"],
  ["2181", "101 Pub", "40.8684", "-74.0223"],
  ["1574", "101 Pub", "40.8684", "-74.0223"],
  ["1573", "101 Pub", "40.8684", "-74.0223"],
  ["1572", "101 Pub", "40.8684", "-74.0223"],
  ["1269", "101 Pub", "40.8684", "-74.0223"],
  ["1230", "101 Pub", "40.8684", "-74.0223"],
  ["221", "101 Pub", "40.8684", "-74.0223"],
  ["220", "101 Pub", "40.8684", "-74.0223"],
  ["697", "113th St. Beach, LBI", "39.5938", "-74.2145"],
  ["2838", "14th Star Brewery and Taproom", "44.8145", "-73.0817"],
  ["2844", "14th Star Brewing Co", "44.8201", "-73.0854"],
  ["2842", "14th Star Brewing Co", "44.8201", "-73.0854"],
  ["2841", "14th Star Brewing Co", "44.8201", "-73.0854"],
  ["2840", "14th Star Brewing Co", "44.8201", "-73.0854"]
];

fullcheckins.map(function(checkin) {
  var numINQuestion = checkin[2]
  results[numINQuestion] = []
  for (var i = fullcheckins.length - 1; i >= 0; i--) {
    if (fullcheckins[i][2] == numINQuestion) {
      results[numINQuestion].push(fullcheckins[i][0])
    }
  };
})

for (var prop in results) {
  var htmlscript = '<div id="slideShowImages-" ' + prop + '>';
  results[prop].forEach(function(id) {
    htmlscript += '<img src="pictures/' + id + '.jpg"/>';
    htmlscript += '</div>';
  })

  $('#results').append(htmlscript)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>