espresso_coffee espresso_coffee - 1 year ago 58
HTML Question

Output values from the array in desired order?

I have array with the multiple records, each record has ID, event name and customer name. My algorithm that I use does not seem to work the way I want. Before I start to loop through array I set the empty variable outside of the loop

var eventId;
then I started looping and inside of the loop I have multiple if statement. So if eventId is empty I want to append tr with event name and below that another tr with customer name. Then next time if my eventId is not empty I want to check if name match with the record, if they match I just want to append td inside of existing tr and output customer name. If they do not match I want to output new tr with event name and new tr with customer name. I have working example here, it looks like that I have
Test 1
outputted twice on the screen and I do not want that. I should have event name only once and all customers for that event below that event.
Here is my code:

Please if you see where my code is breaking let me know. I think that I have problem with appending elements or my algorithm is missing something. Thanks in advance.

Javascript code:

$( 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>');
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 = 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:

<tbody class="myReservation">

Answer Source

You misplaced the double quote when inserting tr elements with ids.

Replace <tr id="row_"'+count+'> with <tr id="row_'+count+'">.

Update: this achieves what you (probably) want:

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>');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download