Getting Column Heading for Dynamic Table from JSON data

Question

I have a dynamic table (columns selected from drop-down selection) taking it's data from a JSON. The column headings for the table are a part of the JSON data.

I'm using this to capture the column heading from the JSON but it is coming as 'undefined'.

jQuery.each(data, function(k, v) {
      html += '<th id="myHeader">' + v.ColHeading + '</th>';
    });

They data is not getting captured as column headings but as the first row of table. What I need is 'ColHeading' values to reflect as column headings and 'Height' and 'Weight' to be the 1st and 2nd row in my table.

The JSON is as below:

var StatJSON = {
        "Option1": {
            "ColHeading": "Volvo",
            "Height": "aaa cm",
            "Weight": "xxx kg",
        },
        "Option2": {
            "ColHeading": "Mercedes",
            "Height": "bbb cm",
            "Weight": "yyy kg",
        },
        "Option3": {
            "ColHeading": "Maruti",
            "Height": "ccc cm",
            "Weight": "zzz kg",
        },
    };

The jQuery to get the data into the table is as below:

function PrintTable(data) {
  var html = '<table class="compTable"><thead><tr><th>';
  if (data && data.length) {
    html += '</th>';
    jQuery.each(data, function(k, v) {
      html += '<th id="myHeader">' + v.ColHeading + '</th>';
    });
    html += '</tr>';
    html += '<tbody>';
    jQuery.each(StatJSON[data[0]], function(k, v) {
      html += '<tr><td>' + k + '</td>';
        jQuery.each(data, function(k2, v2) {
        html += '<td>' + StatJSON[data[k2]][k] + '</td>';
      });
      html += '</tr>';
    });
  } else { html += 'No results found</td></tr>'; }
  html += '</tbody></table>';
  return html;
}

Find below working code:

jQuery(document).ready(function($) {

  var StatJSON = {
    "Option1": {
      "ColHeading": "Volvo",
      "Height": "aaa cm",
      "Weight": "xxx kg",
    },
    "Option2": {
      "ColHeading": "Mercedes",
      "Height": "bbb cm",
      "Weight": "yyy kg",
    },
    "Option3": {
      "ColHeading": "Maruti",
      "Height": "ccc cm",
      "Weight": "zzz kg",
    },
  };

  jQuery('#btnSubmit').click(function() {
    var data = [];
    jQuery("#selection").find(':selected').each(function(e) {
      var this_input = jQuery(this);
      if (this_input.is(':selected')) {
        data.push(this_input.val());
      }
    });

    $('#divResult').empty().append(PrintTable(data));

    function PrintTable(data) {
      var html = '<table class="compTable"><thead><tr><th>';
      if (data && data.length) {
        html += '</th>';
        jQuery.each(data, function(k, v) {
          html += '<th id="myHeader">' + v.ColHeading + '</th>';
        });
        html += '</tr>';
        html += '<tbody>';
        jQuery.each(StatJSON[data[0]], function(k, v) {
          html += '<tr><td>' + k + '</td>';
          jQuery.each(data, function(k2, v2) {
            html += '<td>' + StatJSON[data[k2]][k] + '</td>';
          });
          html += '</tr>';
        });
      } else {
        html += 'No results found</td></tr>';
      }
      html += '</tbody></table>';
      return html;
    }

  });

});

body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.divResult {
  overflow: scroll;
  position: relative;
}

.compTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id="selection" multiple="multiple">
  <option value="Option1">Volvo</option>
  <option value="Option2">Mercedes</option>
  <option value="Option3">Maruti</option>
  <br />
  <input id="btnSubmit" class="button" type="submit" value="submit" />
</select>
<br /><br />
<div id="divResult" class="divResult"></div>

Answer 1

You can use StatJSON[data[i]].ColHeading to get value where keys matches and add them inside your th tag. Also , if key is ColHeading while iterating ignore that values using if(k !="ColHeading"){.. inside tbody .

Demo Code :

jQuery(document).ready(function($) {

  var StatJSON = {
    "Option1": {
      "ColHeading": "Volvo",
      "Height": "aaa cm",
      "Weight": "xxx kg",
    },
    "Option2": {
      "ColHeading": "Mercedes",
      "Height": "bbb cm",
      "Weight": "yyy kg",
    },
    "Option3": {
      "ColHeading": "Maruti",
      "Height": "ccc cm",
      "Weight": "zzz kg",
    },
  };

  jQuery('#btnSubmit').click(function() {
    var data = [];
    jQuery("#selection").find(':selected').each(function(e) {
      var this_input = jQuery(this);
      if (this_input.is(':selected')) {
        data.push(this_input.val());
      }
    });

    $('#divResult').empty().append(PrintTable(data));

    function PrintTable(data) {
      var html = '<table class="compTable"><thead><tr><th>';
      if (data && data.length) {
        html += '</th>';

        jQuery.each(data, function(i) {
          //getting heading at that key
          html += '<th>' + StatJSON[data[i]].ColHeading + '</th>';
        });
        html += '</tr>';
        html += '<tbody>';
        jQuery.each(StatJSON[data[0]], function(k, v) {
          html += "<tr>"
          if (k != "ColHeading") {
            html += "<td>" + k + "</td>"
          }
         
          jQuery.each(data, function(k2, v2) {
            if (k != "ColHeading") {
              html += '<td>' + StatJSON[data[k2]][k] + '</td>';
            }
          });
          html += '</tr>';
        });
      } else {
        html += 'No results found</td></tr>';
      }
      html += '</tbody></table>';
      return html;
    }

  });

});

body {
  font-family: montserratbold, montserratregular, sans-serif;
}

.divResult {
  overflow: scroll;
  position: relative;
}

.compTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin: 10px;
  border: 1px solid #222;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id="selection" multiple="multiple">
  <option value="Option1">Volvo</option>
  <option value="Option2">Mercedes</option>
  <option value="Option3">Maruti</option>
  <br />
  <input id="btnSubmit" class="button" type="submit" value="submit" />
</select>
<br /><br />
<div id="divResult" class="divResult"></div>