按所需顺序从数组中输出值？

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

在插入带有 ID 的 tr 元素时，您放错了双引号。

将<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

您的问题是您在每个循环上都附加了一个新元素：

首先，您正在测试“eventId”是否不为空。如果是，则使用当前循环迭代“myId”进行设置

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 现在是 42，您的输出是：

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

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

（顺便说一句，这里有一个语法错误，它解释了为什么下一次迭代不附加数据）

然后，在下一次迭代中，eventId 仍然是 42，所以你正在这样做

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

此时的输出是一样的（见上面第一个答案的语法错误）

在下一次循环迭代中，myId 现在将是 19，因此您将覆盖 eventid 并在结果中附加 tr

循环继续……

直到 myId 再次等于 42 ：

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

您不希望“事件：测试 1”出现两次，但在最后一次循环迭代中，myId 为 31

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

所以在 if 测试中，eventId NOT 等于 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", "..."]})

（顺便说一句对不起我的英语）