String interpolation example

index.html

<div id="container-fluid">
  <table class="table table-responsive table-striped">
    <thead class="thead-dark">
      <th>ID</th>
      <th>Branch Name</th>
      <th>Name</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Status</th>
    </thead>
    <tbody id="table-body">
      <!-- JS will do its magic here -->
    </tbody>
  </table>
</div>

script.js

// response data
const vendors = [
        {
            "id": 1,
            "branch_name": "Kassulke Ltd",
            "phone": 9412573472,
            "email": "lenna.kozey@hotmail.com",
            "area": "Maggio",
            "gst_no": "Maggio",
            "first_name": "Johnpaul",
            "last_name": "Maggio",
            "status": "Inactive"
        },
        {
            "id": 5,
            "branch_name": "Mills Group",
            "phone": 8951163550,
            "email": "huel.benjamin@yahoo.com",
            "area": "Beer",
            "gst_no": "Beer",
            "first_name": "Monty",
            "last_name": "Beer",
            "status": "Inactive"
        },
        {
            "id": 6,
            "branch_name": "Crooks Inc",
            "phone": 9035365115,
            "email": "allie.farrell@hotmail.com",
            "area": "Hodkiewicz",
            "gst_no": "Hodkiewicz",
            "first_name": "Daija",
            "last_name": "Hodkiewicz",
            "status": "Active"
        },
        {
            "id": 7,
            "branch_name": "Barrows-Cormier",
            "phone": 8388645442,
            "email": "kendrick.schinner@hotmail.com",
            "area": "Schaefer",
            "gst_no": "Schaefer",
            "first_name": "Santos",
            "last_name": "Schaefer",
            "status": "Active"
        },
        {
            "id": 8,
            "branch_name": "Kassulke Ltd",
            "phone": 8545488968,
            "email": "lstroman@hotmail.com",
            "area": "Ernser",
            "gst_no": "Ernser",
            "first_name": "Francesco",
            "last_name": "Ernser",
            "status": "Inactive"
        },
        {
            "id": 9,
            "branch_name": "Huels, Hackett and Pfeffer",
            "phone": 8942039139,
            "email": "joana37@gmail.com",
            "area": "Pouros",
            "gst_no": "Pouros",
            "first_name": "Agustin",
            "last_name": "Pouros",
            "status": "Inactive"
        },
        {
            "id": 12,
            "branch_name": "Huels, Hackett and Pfeffer",
            "phone": 8803465785,
            "email": "keyshawn.klein@gmail.com",
            "area": "Wisozk",
            "gst_no": "Wisozk",
            "first_name": "Elisha",
            "last_name": "Wisozk",
            "status": "Inactive"
        },
        {
            "id": 13,
            "branch_name": "Crooks Inc",
            "phone": 9720560880,
            "email": "walker59@hotmail.com",
            "area": "Ankunding",
            "gst_no": "Ankunding",
            "first_name": "Ada",
            "last_name": "Ankunding",
            "status": "Inactive"
        },
        {
            "id": 14,
            "branch_name": "Wintheiser, Gleichner and Hilpert",
            "phone": 9253373187,
            "email": "gunnar06@hotmail.com",
            "area": "Kunde",
            "gst_no": "Kunde",
            "first_name": "Gianni",
            "last_name": "Kunde",
            "status": "Inactive"
        },
        {
            "id": 15,
            "branch_name": "Rath Ltd",
            "phone": 9233489488,
            "email": "misael63@yahoo.com",
            "area": "Nikolaus",
            "gst_no": "Nikolaus",
            "first_name": "Reggie",
            "last_name": "Nikolaus",
            "status": "Active"
        }
    ];

// parsing data
for (var i = 0; i < vendors.length; i++) {
 const html = document.createElement('tr');

  // tr.className = 'row';

  html.innerHTML = `
    <td> ${vendors[i].id} </td>
    <td> ${vendors[i].branch_name} </td>
    <td> ${vendors[i].first_name + ' ' + vendors[i].last_name} </td>
    <td> ${vendors[i].phone} </td>
    <td> ${vendors[i].email} </td>
    <td> ${vendors[i].status} </td>
  `;

  document.getElementById('table-body').appendChild(html); 
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

string-interpolation-example.markdown

String interpolation example

A Pen by Pragalbha Patil on CodePen.

License.

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />