Different values from different arrays and append together beside one another in a table

Question

So, am currently trying to pull out two different array values from arrays chanArrId & chanArrName via express(socket.io) & node.js.

Then once I have those display them in a table on the same row E:G

<tr class="exe">
    <td>SIP/487-00000060</td>                                       
    <td>0000000001</td>                                 
</tr>

<tr class="exe">
    <td>SIP/488-00000060</td>                                       
    <td>0000000002</td>                                 
</tr>

Then for the next set take a new row, do the same for the following channel values.

When I add another pull the next two out without repeating itself. I have had some kind of success but always fall just short, with wrong positioning or duplicated values.

I have it working fine with one value but not both so:

Call extension 488: Add Channel name and value to the page from array etc.

Works for the first one it works fine as seen at the top it works grand then I get the following when I add a second pair of values:

<tr class="exe" id="exe">                                    
    <td>SIP/487-00000060</td>
    <td>1445964898.228</td>
    <td>1445964898.2281445964900.229</td>
</tr>

It skips the SIP name and then just adds two channel ids in the next row.

Below is the latest code have been tweaking, to see what ave been trying to accomplish.

Client side

socket.on('sipname', function (data,datad) {
        var sipname = '';
        var sipid = '';
        $(".exe").remove();
        for (i = 0; i < data.length; i++) {
            sipname += data[i];
            if (sipname) {
                $sipname.append('<tr class="exe" id="exe">\
                                    <td id="siptd">' + sipname + '</td>');
    }
    for (i = 0; i < datad.length; i++) {
            sipid += datad[i];
            if (sipid) {
                $('#sipTable td:last').after('<td>' + sipid + '</td></tr>');
            }   
            } 
            sipid = '';
        }
    });

Server side function

  function updateSip() {
    io.sockets.emit('sipname', chanArrName,chanArrId);
    chandump();
  }

Stasis: Where am pushing values into array

 bridge.addChannel({
        channel : channel.id
      }, function (err) {
        var name = chanArrName.push(channel.name)
        var id = chanArrId.push(channel.id)
          updateSip();

        if (err) {
          throw err;
        }

Hope you guys can give me a little bit of guidance.

Answer 1

This is how I managed to tackle it in the end:

socket.on('sipname', function (data, datad) {
        var sipname = '';
        var sipid = '';
        $('.exe').remove();
        for (var i = 0; i < data.length; i++) {
            sipname = data[i];
            sipid = datad[i];
            if (sipname) {
                $sip.html('<tr class="exe">\
                                <td class="sipid">' + sipid + '</td>\
                                <td class="sipname">' + sipname + '</td>\
                                <td><button class="btn btn-default mute" id="mute" type="submit"><span>Mute</span></button></td>\
                                <td><button class="btn btn-default kick" id="kick" type="submit">Kick</button></td>\
                                </tr>');
            }
        }
    });

Because am handling the two arrays at the same time on the server side and how there are both directly related every time I pull them out into the web page I simply E.G Channel.name & Channel.id

I just started calling out the value along with sipname as they will both have the same set of values every time and also get added or removed at the same time.

Hope this makes sense.

This is how I got it to work in the end for those who want an alternate solution.

Answer 2

In the client code you have a nested for-loop with the same index variable as the outer loop, which means the outer one will not run as many times as expected.

Also, the += operator will concatenate new values to previous values, explaining the concatenated channel ids you notice. You are already expanding the DOM with nodes incrementally, so there is no need to use +=. Just assign. The same holds for the outer loop: just assign to sipname with =.

Indenting your code correctly may also help debugging it.

Finally, declare your index variable(s) with var.

With these corrections, you get this:

socket.on('sipname', function (data, datad) {
    var sipname, sipid, dataHtml;
    $(".exe").remove();
    for (var i = 0; i < data.length; i++) {
        sipname = data[i];
        if (sipname) {
            dataHtml = '<td id="siptd">' + sipname + '</td>';
            for (var j = 0; j < datad.length; j++) {
                sipid = datad[j];
                if (sipid) {
                    dataHtml += '<td>' + sipid + '</td>';
                }
            } 
            $sipname.append('<tr class="exe" id="exe">' + dataHtml + '</tr>');
        }
    }
});

EDIT:

Above code was updated after comments. This version concatenates the HTML for each TD in a variable, to then finally wrap it in a TR tag and append it to $sipname. I have no view on the variable $sipname, so I assume it is set correctly.

There is one thing you certainly need to fix:

The code sets values for the id properties of the generated nodes, but always the same ones. This is not acceptable in HTML: an id should be unique in the document.