在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變量，像這樣：

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

我相信這是你要找的。

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>