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

我相信这是你正在寻找的。

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

2）现在我们有一个索引映射到ids

的对象

3）为每个人写下相应的html

＆＃13;

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)
}

＆＃13;

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

＆＃13;

Answer 2

一种选择是在渲染之前重新排列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]
}

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

2 个答案: