Populate table with an array of objects

Question

I have a table that I need to populate with data from an array of objects. The table looks and works like this .

The problem is, if I click on any row it shows me data from the last object of the endpointsData array( {epid: 4... etc). What I want is to have the right data in the right place.

For example for the 1st row containing this object data:

{
  "nodeid": 1,
  "vendor": "0x0345",
  "product_id": "0x0201",
  "product_type": "0x0008",
  "home_id": "0xD087E344",
  "secure": "1",
},

After I click it, the div that opens below it, must contain this data:

{
  "epid": 1,
  "clslist": "5f",
  "type": "0x02,0x01",
  "zplus": "0x00,0x00,0x00,0x0000,0x0000"
},

But as you can see in the demo, any row I click it displays this data:

{
  "epid": 4,
  "clslist": "134,547,843,122",
  "type": "2x07,0x01",
  "zplus": "3x44,0x0d01,0x1ed01"
},

Any ideas on what I'm doing wrong?

Code (as requested):

 function insertObject() { var data = [{ "nodeid": 1, "vendor": "0x0345", "product_id": "0x0201", "product_type": "0x0008", "home_id": "0xD087E344", "secure": "1", }, { "nodeid": 2, "vendor": "0x0285", "product_id": "0x0777", "product_type": "0x0001", "home_id": "0xD087D213", "secure": "0", }, { "nodeid": 3, "vendor": "0x1145", "product_id": "0x7899", "product_type": "0x0851", "home_id": "0xD034T13", "secure": "0", }, { "nodeid": 4, "vendor": "0x8992", "product_id": "0x1236", "product_type": "0x8101", "home_id": "0xD0682F13", "secure": "1", } ]; var endpointsData = [{ "epid": 1, "clslist": "5f", "type": "0x02,0x01", "zplus": "0x00,0x00,0x00,0x0000,0x0000" }, { "epid": 2, "clslist": "20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84", "type": "0x07,0x01", "zplus": "0x01,0x00,0x06,0x0c07,0x0c07" }, { "epid": 3, "clslist": "20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84", "type": "0x07,0x01", "zplus": "0x01,0x00,0x06,0x0d01,0x0d01" }, { "epid": 4, "clslist": "134,547,843,122", "type": "2x07,0x01", "zplus": "3x44,0x0d01,0x1ed01" }, ]; //populate the table with data from "data" object var tbl = document.getElementById('tableData'); var tblBody = document.getElementById('tableBody'); for (var i = 0; i < data.length; i++) { var row = document.createElement('tr'); row.classList.add("header"); for (var value in data[i]) { var cell = document.createElement("td"); var cellText = document.createTextNode(data[i][value]); cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } //populate #divTemplate with data from "endpointsData" object var key = ["epid", "clslist", "type", "zplus"]; for (var d = 0; d < endpointsData.length; d++) { var endValue = {}; endValue = endpointsData[d]; for (var k = 0; k < key.length; k++) { if (endpointsData[d]) { $('#' + key[k]).text(endValue[key[k]]); } } } //create a row for displaying the #divTemplate data var $contentCell = $("#divTemplate"); var $newRow = $("<tr style='display: none;'><td colspan='6'></td></tr>"); $newRow.find('td').append($contentCell); $("tr.header:not(#hDeselect)").after($newRow); $('tr.header').click(function() { $contentCell.show(); $(this).next('tr').css('display', function() { return this.style.display == 'none' ? 'table-row' : 'none' }); }); } insertObject(); 

 th { white-space: nowrap; color: #D5DDE5; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-size: 23px; font-weight: 100; padding: 24px; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; font-size: 16px; font-weight: normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); cursor: pointer; } /*grey row*/ tr:hover td { background: #4E5066; color: #FFFFFF; border-top: 1px solid #22262e; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } td { text-align: center; background: #FFFFFF; vertical-align: middle; font-weight: 300; font-size: 18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px hidden #C1C3D1; } tr:hover a { text-decoration: none; color: white; } tr a { text-decoration: none; color: black; } tr.header { display: table-row; } .rounded-list label { position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; border-radius: .3em; } button { position: relative; display: block; margin: .5em 0; background: #87ceeb; color: #444; text-decoration: none; border-radius: .5em; } .rounded-list label:hover, button { background: #eee; } .rounded-list label:before { content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; } #name, #loc:focus { outline: 0px solid transparent; } #tableheader { cursor: default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableData"> <thead> <tr id="tableheader"> <th>NODE ID</th> <th>VENDOR</th> <th>PRODUCT ID</th> <th>PRODUCT TYPE</th> <th>HOME ID</th> <th>SECURE</th> </tr> </thead> <tbody id="tableBody"> </tbody> <div id="divTemplate"> <ol class="rounded-list"> <li><label>ID: <input id="roomName"/></label></li> <li><label>LOC. NAME: <input id="loc"/></label></li> <li><label>EPID: <span id="epid"></span></label></li> <li><label>CLSLIST: <span id="clslist"></span></label></li> <li><label>TYPE: <span id="type"></span></label></li> <li><label>ZPLUS: <span id="zplus"></span></label></li> <button onclick="submitData();">Submit changes</button> </ol> </div> 

Answer 1

1. It's better to separate your code into functions that each handle a task.
2. You're using jQuery, so use jQuery.
3. Store the index of the data object into each tr, that way you can update the template div using the object from endpointsData of that same index. A data-index will be perfect.
4. Put the template div inside a tr in HTML instead of doing it in JS.

Here it is:

function createRow(object, index) {                                     // this function takes an object and its index from the data array and then creates a tr for it
    return $("<tr>").append(                                            // create a tr
        $.map(object, function(value) {                                 // and fill it
            return $("<td>").text(value);                               // with each value from the object mapped into a td
        })
    ).addClass("header")                                                // then add the class header to it
     .data("index", index);                                             // and store the index of the object as data-index so it can be used to fill the template when the tr is clicked
}

function populateTable(data) {                                          // this function takes an array of data object and fill the table with trs
    $("#tableBody").append(                                             // fill the table
        $.map(data, createRow)                                          // with each object from the array mapped into a tr using createRow
    );
}

function updateTemplate(object) {                                       // this function takes an object and fill the template with its values
    $.each(["epid", "clslist", "type", "zplus"], function(index, key) { // for each key in the array ...
        $('#' + key).text(object[key]);                                 // fill the template with values from the object
    });
}

var $templateRow = $("#templateRow");                                   // template row that contain the template div
$("#tableBody").on("click", "tr.header", function() {                   // when a .header row is clicked (using event delegation as the rows are still not generated yet)
    updateTemplate(endpointsData[$(this).data("index")]);               // get the object from endpointsData using the index of the current tr (stored eariler as data-index) and then pass it to updateTemplate so the template is updated with newer values
    $templateRow.toggle();                                              // toggle the visibility of the template row (hide it if visible, show it otherwise)
    $templateRow.insertAfter(this);                                     // put the template row right after the currently clicked row
});

populateTable(data);                                                    // populate the table

Working code snippett:

 var data = [{"nodeid":1,"vendor":"0x0345","product_id":"0x0201","product_type":"0x0008","home_id":"0xD087E344","secure":"1"},{"nodeid":2,"vendor":"0x0285","product_id":"0x0777","product_type":"0x0001","home_id":"0xD087D213","secure":"0"},{"nodeid":3,"vendor":"0x1145","product_id":"0x7899","product_type":"0x0851","home_id":"0xD034T13","secure":"0"},{"nodeid":4,"vendor":"0x8992","product_id":"0x1236","product_type":"0x8101","home_id":"0xD0682F13","secure":"1"}]; var endpointsData = [{"epid":1,"clslist":"5f","type":"0x02,0x01","zplus":"0x00,0x00,0x00,0x0000,0x0000"},{"epid":2,"clslist":"20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84","type":"0x07,0x01","zplus":"0x01,0x00,0x06,0x0c07,0x0c07"},{"epid":3,"clslist":"20,5e,72,86,59,73,5a,8f,98,7a,80,71,85,5c,70,30,31,84","type":"0x07,0x01","zplus":"0x01,0x00,0x06,0x0d01,0x0d01"},{"epid":4,"clslist":"134,547,843,122","type":"2x07,0x01","zplus":"3x44,0x0d01,0x1ed01"}]; function createRow(object, index) { return $("<tr>").append( $.map(object, function(value) { return $("<td>").text(value); }) ).addClass("header") .data("index", index); } function populateTable(data) { $("#tableBody").append( $.map(data, createRow) ); } function updateTemplate(object) { $.each(["epid", "clslist", "type", "zplus"], function(index, key) { $('#' + key).text(object[key]); }); } var $templateRow = $("#templateRow"); $("#tableBody").on("click", "tr.header", function() { updateTemplate(endpointsData[$(this).data("index")]); $templateRow.toggle(); $templateRow.insertAfter(this); }); populateTable(data); 

 th { white-space: nowrap; color: #D5DDE5; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-size: 23px; font-weight: 100; padding: 24px; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } tr { border-top: 1px solid #C1C3D1; border-bottom-: 1px solid #C1C3D1; color: #666B85; font-size: 16px; font-weight: normal; text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1); cursor: pointer; } /*grey row*/ tr:hover td { background: #4E5066; color: #FFFFFF; border-top: 1px solid #22262e; } tr:nth-child(odd) td { background: #EBEBEB; } tr:nth-child(odd):hover td { background: #4E5066; } td { text-align: center; background: #FFFFFF; vertical-align: middle; font-weight: 300; font-size: 18px; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px hidden #C1C3D1; } tr:hover a { text-decoration: none; color: white; } tr a { text-decoration: none; color: black; } tr.header { display: table-row; } .rounded-list label { position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; border-radius: .3em; } button { position: relative; display: block; margin: .5em 0; background: #87ceeb; color: #444; text-decoration: none; border-radius: .5em; } .rounded-list label:hover, button { background: #eee; } .rounded-list label:before { content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; } #name, #loc:focus { outline: 0px solid transparent; } #tableheader { cursor: default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableData"> <thead> <tr id="tableheader"> <th>NODE ID</th> <th>VENDOR</th> <th>PRODUCT ID</th> <th>PRODUCT TYPE</th> <th>HOME ID</th> <th>SECURE</th> </tr> </thead> <tbody id="tableBody"> <tr id="templateRow" style='display: none;'> <td colspan='6'> <div id="divTemplate"> <ol class="rounded-list"> <li><label>ID: <input id="roomName"/></label></li> <li><label>LOC. NAME: <input id="loc"/></label></li> <li><label>EPID: <span id="epid"></span></label></li> <li><label>CLSLIST: <span id="clslist"></span></label></li> <li><label>TYPE: <span id="type"></span></label></li> <li><label>ZPLUS: <span id="zplus"></span></label></li> <button onclick="submitData();">Submit changes</button> </ol> </div> </td> </tr> </tbody> <table>