How to populate a Bootstrap table using selected elements of an array of objects using pure JavaScript?

Question

I'd like to to populate a Bootstrap table from an array of objects using pure JavaScript.

Here is my data.js file:

JavaScript

let testData = [

    {
        id : 1,
        firstName : 'John',
        lastName : 'Smith',
        age :  35,
        retired : false
    },

    {
        id : 2,
        firstName : 'Mary',
        lastName : 'Williams',
        age :  27,
        retired : false
    },

    {   
        id : 3,
        firstName : 'Bill',
        lastName : 'Jones',
        age :  83,
        retired : true
    },

    {
        id : 4,
        firstName : 'Sally',
        lastName : 'Lee',
        age :  49,
        retired : false
    }
]

In my main.js file, I have the following function that builds the HTML and populates the table with only the firstName, lastName, and age. But, this function is not working.

function createTable(data) {
    var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('');
        tr.append("" + data[i].firstName + "");
        tr.append("" + data[i].lastName + "");
        tr.append("" + data[i].age + "");     
    }end(tr);
    }

createTable(testData)

Here is my index.html file:

HTML




    
    
    
    Document

    
    



     

    
        
          
            First Name
            Last Name
            Age

Any assistance would be most appreciated!

Thanks!

userYBSN · Answer

tbody should be inside table element.
You created the tr element correctly, but you didn't append it to the tbody.

const testData = [

    {
        id : 1,
        firstName : 'John',
        lastName : 'Smith',
        age :  35,
        retired : false
    },

    {
        id : 2,
        firstName : 'Mary',
        lastName : 'Williams',
        age :  27,
        retired : false
    },

    {   
        id : 3,
        firstName : 'Bill',
        lastName : 'Jones',
        age :  83,
        retired : true
    },

    {
        id : 4,
        firstName : 'Sally',
        lastName : 'Lee',
        age :  49,
        retired : false
    }
]

function createTable(data) {
    
    for (let i = 0; i < data.length; i++) {
        let tr = $('');
        tr.append("" + data[i].firstName + "");
        tr.append("" + data[i].lastName + "");
        tr.append("" + data[i].age + "");
        $('tbody').append(tr)
    }
}

createTable(testData)




    
    
    
    Document

    
    
   



     

    
        
          
            First Name
            Last Name
            Age

With pure javascript ( without jquery )

const testData = [

    {
        id : 1,
        firstName : 'John',
        lastName : 'Smith',
        age :  35,
        retired : false
    },

    {
        id : 2,
        firstName : 'Mary',
        lastName : 'Williams',
        age :  27,
        retired : false
    },

    {   
        id : 3,
        firstName : 'Bill',
        lastName : 'Jones',
        age :  83,
        retired : true
    },

    {
        id : 4,
        firstName : 'Sally',
        lastName : 'Lee',
        age :  49,
        retired : false
    }
]

const tableBody = document.querySelector('tbody');

function createTable(data) {
    
    for (let i = 0; i < data.length; i++) {
        let tr = document.createElement('tr');
        tr.innerHTML = `${data[i].firstName}
        ${data[i].lastName}
        ${data[i].age}`
        tableBody.append(tr)
    }
}

createTable(testData)




    
    
    
    Document

    
    
   



     

    
        
          
            First Name
            Last Name
            Age

kaushik mn · Answer

I have added a fiddle link with the requested output. If my understanding isn't wrong, you have data in .js file as an array of objects and you need to populate the data in bootstrap table. Hopefully it helps!

HTML






  
    
      Id
      First Name
      Last Name
      Age
      Retired

JS

var $table = $("#table");
    
    $(function () {
      let testData = [
        {
          id: 1,
          firstName: "John",
          lastName: "Smith",
          age: 35,
          retired: false,
        },
    
        {
          id: 2,
          firstName: "Mary",
          lastName: "Williams",
          age: 27,
          retired: false,
        },
    
        {
          id: 3,
          firstName: "Bill",
          lastName: "Jones",
          age: 83,
          retired: true,
        },
    
        {
          id: 4,
          firstName: "Sally",
          lastName: "Lee",
          age: 49,
          retired: false,
        },
      ];
      var data = [];
    
      testData.forEach(function (value) {
        data.push(value);
      });
      $table.bootstrapTable({ data: data });
    });

fiddle: http://jsfiddle.net/uvbqt6gc/

zer00ne · Answer

must always be located before or as the last child of a

. If a is not added in HTML, it is added to each

by the browser by default.

Details are commented in example

const data = [{
  id: 1,
  firstName: 'John',
  lastName: 'Smith',
  age: 35,
  retired: false
}, {
  id: 2,
  firstName: 'Mary',
  lastName: 'Williams',
  age: 27,
  retired: false
}, {
  id: 3,
  firstName: 'Bill',
  lastName: 'Jones',
  age: 83,
  retired: true
}, {
  id: 4,
  firstName: 'Sally',
  lastName: 'Lee',
  age: 49,
  retired: false
}];

// Reference


const tB = document.querySelector("table").tBodies[0];

/**
 * @desc - Generates table rows from data. A

 must be in DOM.
 * @param {object}   tbody   - Reference to a

or


 * @param {array

for each object in the array * Add a

for each key of >hdrs< * Add the value that corresponds to each key of >hdrs< to each

*/ array.forEach(obj => { let tr = tbody.insertRow(); hdrs.forEach(key => tr.insertCell().textContent = obj[key]); }); } createRows(tB, data, 1, 2, 3);

How to populate a Bootstrap table using selected elements of an array of objects using pure JavaScript?

3 Answers