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

Output values from the array in desired order?

本文关键字：输出 数组 顺序      更新时间：2023-09-26

我有多个记录的数组，每个记录有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>

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

用<tr id="row_'+count+'">代替<tr id="row_"'+count+'>

Update:这实现了你(可能)想要的:

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

你的问题是你在每个循环中添加了一个新元素:

首先，测试"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并在consequence中添加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是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", "..."]})

(抱歉我的英文不好)

相关文章：