以所需顺序从数组输出值？

Question

我有多个记录的数组，每个记录都有ID，事件名称和客户名称。 我使用的算法似乎无法达到我想要的方式。 在开始遍历数组之前，我在循环var eventId;之外设置了空变量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"});

在这里，您不希望“ Event：Test 1”出现两次，但在最后一次循环迭代中， myId为31

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

因此，在if测试中， eventId 不等于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", "..."]})

（对不起我的英语）