按照所需順序從數組中輸出值？

Question

我有多個記錄數組，每個記錄有ID，事件名稱和客戶名稱。我使用的算法似乎沒有按照我想要的方式工作。在我開始循環數組之前，我在循環外設置了空變量var eventId;然後我開始循環，並在循環中我有多個if語句。因此，如果eventId爲空，我想在事件名稱後面附加tr，並在其下面帶有客戶名稱的另一個tr。然後下一次，如果我的eventId不爲空，我想檢查名稱是否與記錄匹配，如果匹配，我只想在現有tr內附加td並輸出客戶名稱。如果它們不匹配，我想輸出帶有事件名稱的新tr和帶有客戶名稱的新tr。我在這裏有工作示例，它看起來像我在屏幕上輸出兩次Test 1，我不想那樣。我應該只在該事件下有一次活動名稱和該事件的所有客戶。 這裏是我的代碼： https://jsfiddle.net/dmilos89/t1v2r8jm/3/

請如果你看到我的代碼打破讓我知道。我認爲我有追加元素的問題，或者我的算法缺少一些東西。提前致謝。

Javascript代碼：

$(document).ready(function() { 
    var myRes = []; 
    myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Mike, Allan"}); 

    myRes.push({'myId':"42",'eventName':"Test 1",'rCustumer':"Gates, Bill"}); 

    myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"John, Bill"}); 

    myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"Adams, Ron"}); 

    myRes.push({'myId':"31",'eventName':"May Test 1",'rCustomer':"Steve, Marie"}); 

    myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Ariel, Bill"}); 

    myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Ron, Nill"}); 

    myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Kim, Alen"}); 

    myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Will, Huges"}); 

    myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Seth, Peak"}); 

    var eventId = ''; 
    var count = 1; 

    for(var i=0; i< myRes.length; i++){ 
     if(eventId != ''){ 
      if(eventId == myRes[i].myId){ 
       $('#row_' + count).append('<td>'+myRes[i].rCustomer+'</td>'); 
      }else{ 
       eventId = myRes[i].myId; 
       count++; 
       $('.myReservation').append('<tr><td><b>Event: '+myRes[i].eventName+'</b></td></tr>'); 
       $('.myReservation').append('<tr id="row_"'+count+'><td>'+myRes[i].rCustomer+'</td></tr>'); 
      } 
     }else{ 
      eventId = myRes[i].myId; 
      $('.myReservation').append('<tr><td><b>Event: '+myRes[i].eventName+'</b></td></tr>'); 
      $('.myReservation').append('<tr id="row_"'+count+'><td>'+myRes[i].rCustomer+'</td></tr>'); 
     } 
    } 
}); 

HTML代碼：

<table> 
    <tbody class="myReservation"> 
    </tbody> 
</table> 

Answer 1

您插入tr元素與IDS的時候弄丟了雙引號。

將<tr id="row_"'+count+'>替換爲<tr id="row_'+count+'">。

更新：，這達到你（可能）想要什麼：

var found = []; 

for (var i = 0; i < myRes.length; i++) { 
    if (found[myRes[i].myId] === 1) { 
    $('#row_' + myRes[i].myId).append('<td>' + myRes[i].rCustomer + '</td>'); 
    } else { 
    found[myRes[i].myId] = 1; 
    $('.myReservation').append('<tr><td><b>Event: ' + myRes[i].eventName + '</b></td></tr>'); 
    $('.myReservation').append('<tr id="row_' + myRes[i].myId + '"><td>' + myRes[i].rCustomer + '</td></tr>'); 
    } 
} 

Answer 2

你的問題是，你附加在每個循環中的新元素：

首先，你正在測試，如果「事件ID」不是空的。如果是，則與當前循環迭代「身份識別碼」

eventId = myRes[i].myId; 
$('.myReservation').append('<tr><td><b>Event: '+myRes[i].eventName+'</b></td></tr>'); 
$('.myReservation').append('<tr id="row_"'+count+'><td>'+myRes[i].rCustomer+'</td></tr>'); 

根據您的數據設置它，EVENTID現在，你的輸出是：

<tr><td><b>Event: Test 1</b></td></tr> 

<tr id="row_" 1=""><td>Mike, Allan</td></tr> 

（由在這裏有一個語法錯誤，它解釋了爲什麼下一次迭代不會追加數據）

然後，在下一次迭代中，eventId仍然是所以你在做這個

$('#row_' + count).append('<td>'+myRes[i].rCustomer+'</td>'); 

輸出是在這一點上是相同的（見上面的語法錯誤在第一個答案）

在下一循環迭代，身份識別碼將現在所以你要重寫事件ID和附加在後果TR

循環繼續下去......

直到身份識別碼再次等於：

你不希望「事件：測試1」

myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Ariel, Bill"}); 

這裏出現兩次，但在最後一個循環迭代身份識別碼是

myRes.push({'myId':"31",'eventName':"May Test 1",'rCustomer':"Steve, Marie"}); 

所以在if測試，事件ID是不是等於myRes [i] .myId，因此您的腳本附加一個新的tr與重複的事件。

一種解決方案可能是這一個：

$(document).ready(function() { 
     var myRes = []; 
     myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Mike, Allan"}); 
     myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Gates, Bill"});     
     myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"John, Bill"});     
     myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"Adams, Ron"});     
     myRes.push({'myId':"31",'eventName':"May Test 1",'rCustomer':"Steve, Marie"});     
     myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Ariel, Bill"});     
     myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Ron, Nill"});     
     myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Kim, Alen"});     
     myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Will, Huges"});      
     myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Seth, Peak"}); 


     myRes.forEach(function(value, key) { 

      var table = $('.myReservation2'); 
      var elemInTable = table.find('tr#row_'+value.myId); // $('#row_42') as an example 

      // If row doesn't exists, create it with it's customers 
      if(!elemInTable.length) { 
       table.append('<tr id="row_'+value.myId+'"><td>'+value.eventName+'</td></tr>'); 

       elemInTable = table.find('tr#row_'+value.myId); 
       elemInTable.after('<tr><td>'+value.rCustomer+'</td></tr>'); 
      } 
      // If it already exists, simply add the customers 
      else { 
       elemInTable.after('<tr><td>'+value.rCustomer+'</td></tr>'); 
      } 

     }) 
    }); 

不過，我不認爲這是做了正確的方法，事實上，我認爲你應該重新組織你的數據（如果你的情況下允許其）是這樣的：

myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer': ["Mike, Allan", "Gates", "Bill", "..."]}) 

（對不起，順便說一下我的英語）