Creating table from Object in html/javascript [closed]

I have hardcoded the table in html, I want to generate that table dynamically now in the similar structure with the help of the object. In most of the articles I have looked it shows to dynamically create the table in a slightly different format taking object key as a header but I want to create a table from every object value. For e.g result[0] should be one table, result[1] be another table with any one key-value eg. Tab A as header. How can i do that?

I only want to display the table where ID is equal to 23

result = [{
  "Plan ID": 0,
  "ID": 24,
  "[Plan name]": "Tab A",
  "Emp Only": 133.90,
  "Emp + Spouse/Partner": 161.30,
  "Emp + Child(ren)": 53.30,
  "Emp + Family": 186.20,
  " max contrib. / Emp only": 3000,
  " max contrib. / Emp + dependents": 6000,
  "Emp ded. / Emp only": 6650,
  "Emp ded. / Emp + dependents": 13300
}, {
  "Plan ID": 0,
  "ID": 23,
  "[Plan name]": "Tab B",
  "Emp Only": 33.90,
  "Emp + Spouse/Partner": 161.1,
  "Emp + Child(ren)": 55.30,
  "Emp + Family": 180.8,
  " max contrib. / Emp only": 3000,
  " max contrib. / Emp + dependents": 6000,
  "Emp ded. / Emp only": 660,
  "Emp ded. / Emp + dependents": 5500

}]
<div class="table_container">
  <table id="table2" class="checkboxdiv">
    <tr>
      <th>Tab B<input type="checkbox" id="2" name="table2" value="table2" onchange="myFunction(event)"></th>
    </tr>
    <tr>
      <td>$33.90</td>
    </tr>
    <tr>
      <td>$161.1</td>
    </tr>
    <tr>
      <td>$53.30</td>
    </tr>
    <tr>
      <td>$180.8</td>
    </tr>
    <tr>
      <td>$3000</td>
    </tr>
    <tr>
      <td>$6000</td>
    </tr>
    <tr>
      <td>$660</td>
    </tr>
    <tr>
      <td>$5500</td>
    </tr>
  </table>
</div>

Answer

You could construct your table using a template-literal and map each key-value pair to a row.

Just pass the record (data), the key for the table name, and the index of appearance in the original array.

Format numbers as currency ($) as long as they validate as numbers (!isNaN).

You can append the HTML text as a node by calling insertAdjacentHTML on the parent (body) and passing in beforeend.

Edit: I added a flag (INCLUDE_KEYS) to show/hide key columns for each table. It is optional and currently set to false.

const INCLUDE_KEYS = false; // Set to true to reveal keys

const createTableHTML = (data, key, index, includeKeys) => `
  <div class="table-wrapper">
    <table class="vertical-table">
      <thead>
        <tr>
          <th ${includeKeys ? 'colspan="2"' : ''}>
            ${data[key]}
            <input type="checkbox"
                   onchange="myfunction(this)"
                   value="table${index + 1}" /></th>
        </tr>
      </thead>
      <tbody>
        ${Object.keys(data).filter(k => k !== key).map(key => `<tr>
          ${includeKeys ? `<th>${key}</th>` : ''}
          <td>${!isNaN(data[key]) ? `$${data[key].toFixed(2)}` : data[key]}</td>
        </tr>`).join('')}
      </tbody>
    </table>
  </div>
`;

const result = [{
  "Plan ID": 0,
  "ID": 23,
  "[Plan name]": "Tab A",
  "Emp Only": 30.5,
  "Emp + Spouse/Partner": 154.1,
  "Emp + Child(ren)": 48.8,
  "Emp + Family": 180.8,
  " max contrib. / Emp only": "None",
  " max contrib. / Emp + dependents": "None",
  "Emp ded. / Emp only": 2750,
  "Emp ded. / Emp + dependents": 5500,
  "Emp OOP max / per person": 6850,
  "Emp OOP max / entire famliy": 13700
}, {
  "Plan ID": 0,
  "ID": 23,
  "[Plan name]": "Tab B",
  "Emp Only": 30.5,
  "Emp + Spouse/Partner": 154.1,
  "Emp + Child(ren)": 48.8,
  "Emp + Family": 180.8,
  " max contrib. / Emp only": "None",
  " max contrib. / Emp + dependents": "None",
  "Emp ded. / Emp only": 2750,
  "Emp ded. / Emp + dependents": 5500,
  "Emp OOP max / per person": 6850,
  "Emp OOP max / entire famliy": 1555
}];

result.forEach((obj, index) =>
  document.body.insertAdjacentHTML('beforeend',
    createTableHTML(obj, '[Plan name]', index, INCLUDE_KEYS)));
  
function myfunction(checkbox) {
  console.log(checkbox.value);
}
.table-wrapper table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

.table-wrapper table,
.table-wrapper table th,
.table-wrapper table td {
  border: thin solid grey;
}

.table-wrapper table thead {
  border-bottom: thick double grey;
}

.table-wrapper table th,
.table-wrapper table td {
  padding: 0.25em;
}

.table-wrapper tbody td {
  text-align: right;
}