Fill an HTML table with a Javascript Array with objects

Question

im new to coding and to this community and i really searched for the answer i wanted but found nothing this specific. So here goes :

i have an array that goes like this :

var arr = new Array();
arr[0]={col1:"john",col2:"is",col3:"a", col4:"fool"};
arr[1]={col1:"paul",col2:"is",col3:"a", col4:"fool"};
arr[2]={col1:"luke",col2:"is",col3:"a", col4:"fool"};

and an HTML table that already exists :

<body>
<Table>

 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
 </tr>

</Table>

</body>

i

function fillTable();

var tr,td,row,tn,col;

  for(var row=0;row=arr.length;row++){
    tr=document.getElementsByTagName("tr")[i];
    for(var col=0;col=arr[row].length;col++){
        document.getElementsByTagName("td").innerHTML = arr[row].col;

    }
  }

ive tried many ways like changeNodeValue, or creating a whole new table but obviously im missing something so im asking you guys. Thanks in advance for the help

Basically what you have is a JSON Object array, arr[row].col is not a property there. — progrAmmar
– progrAmmar, Commented Nov 24, 2016 at 1:53

S.Dan · Accepted Answer · 2016-11-24 02:18:49Z

In your approach,you have selected arr[row].col which returns nothing because col is not a key. So either you have to use another array in it or iterate through the keys of the object using Object.keys(arr[row])

But I suggest not to use a pre-defined table but to keeep appending the components you want - using jQuery - it will minimize possible errors.

var arr = new Array();
arr[0] = {
  col1: "john",
  col2: "is",
  col3: "a",
  col4: "fool"
};
arr[1] = {
  col1: "paul",
  col2: "is",
  col3: "a",
  col4: "fool"
};
arr[2] = {
  col1: "luke",
  col2: "is",
  col3: "a",
  col4: "fool"
};



function fillTable() {

  var tr, td, row, tn, col;
  for (var row = 0; row < arr.length; row++) {
    tr = document.getElementsByTagName("tr")[row];
    var len = Object.keys(arr[row]).length;
    for (var col = 0; col < len; col++) {
      var key = Object.keys(arr[row])[col];
      document.getElementsByTagName("td")[col + (row * len)].innerHTML = arr[row][key];
    }
  }
}

fillTable();

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>

</table>

Bob Dust · Accepted Answer · 2016-11-24 02:00:55Z

I'd like to suggest jquery.dataTables:

        $(document).ready(function () {
            var arr = [
            { col1: "john", col2: "is", col3: "a", col4: "fool" },
            { col1: "paul", col2: "is", col3: "a", col4: "fool" },
            { col1: "luke", col2: "is", col3: "a", col4: "fool" }];
            $('#table').DataTable({
                data: arr,
                columns: [
                    { data: 'col1' },
                    { data: 'col2' },
                    { data: 'col3' },
                    { data: 'col4' },
                ]
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="table"></table>

Thum Choon Tat · Accepted Answer · 2016-11-24 02:04:37Z

0

var tr,td,row,tn,col;

for(var row=0;row=arr.length;row++){
    //Here i is not defined
    //tr=document.getElementsByTagName("tr")[i];

    tr=document.getElementsByTagName("tr")[row];

    //object does not have length
    //for(var col=0;col=arr[row].length;col++){

    // Loop through the number of keys in your object
    for(var col=0;col=Object.keys(arr[row]).length;col++){
        // Here arr[row].cal is not a part of your object
        //document.getElementsByTagName("td").innerHTML = arr[row].col;

        document.getElementsByTagName("td")[col].innerHTML = arr[row]['col' + (col + 1)];
    }
}

answered Nov 24, 2016 at 2:04

Thum Choon Tat

3,0901 gold badge24 silver badges26 bronze badges

Comments

progrAmmar · Accepted Answer · 2016-11-24 02:15:30Z

0

function fillTable(){

    var tr,td,row,tn,col;

    for(var row=0;row=arr.length;row++){
        var tr=document.getElementsByTagName("tr")[i];
        var col = 0; 
        for(var i in arr[row]){                               
            tr.cells[col].innerHTML = arr[row][i];
            col++;
        }
    }
}

answered Nov 24, 2016 at 2:15

progrAmmar

2,6805 gold badges32 silver badges59 bronze badges

Comments

Romeo Sierra · Accepted Answer · 2016-11-24 02:26:14Z

Assuming that

the data set is known upfront
the data set won't change later

I would do something like below. Note that this is a purely javascript solution.

Assign a class to all the rows first of all. That would make it easy to pick them up in your script.

<script type="text/javascript">
    var arr = new Array();
    arr[0]={col1:"john",col2:"is",col3:"a", col4:"fool"};
    arr[1]={col1:"paul",col2:"is",col3:"a", col4:"fool"};
    arr[2]={col1:"luke",col2:"is",col3:"a", col4:"fool"};

    //extract the table rows
    var rows = document.getElementsByClassName('rows');

    //iterate through the rows collection
    for(i = 0; i < rows.length; i++){
        //extracts the cols collection in each row.
        var cols = rows[i].getElementsByTagName('td');

        //assign the desired values. you could do this iteratively as well
        cols[0].innerHTML = arr[i].col1;
        cols[1].innerHTML = arr[i].col2;
        cols[2].innerHTML = arr[i].col3;
        cols[3].innerHTML = arr[i].col4;
    }
</script>

By the way, if a "John", a "Paul" or a "Luke" see this thread, they would be really angry you know? ;)

Collectives™ on Stack Overflow

Fill an HTML table with a Javascript Array with objects

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related