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 code：

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

Answer 1

在使用ids插入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

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

首先，您正在测试＆＃34; eventId＆＃34;不是空的。如果是，则使用当前循环迭代设置它＆＃34; myId＆＃34;

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

这里你不想要＆＃34;事件：测试1＆＃34;出现两次，但在最后一次循环迭代 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", "..."]})

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

数组的输出值是否按所需顺序排列？

2 个答案: