Javascript i need to show data in table from dynamic object keys

Question

Hello everyone I have a array of objects now those objects hold have multiple keys and those keys are dynamic so I have no idea how can I loop through data and show them in the table I am not sure how can I access those when I loop through. I was able to get the object keys into a separate array but don't how to utilize them. Here is the array of data and the array of keys can anyone guide or help me

This is the data array

var data = {
"data": [
        {
            "nationality": "Indonesia",
            "gender": "Male",
            "country": "Indonesia",
            "preferred_role": "Customer Service",
            "work_experience": "More than 1 year and less than 2 years",
            "preferred_work_environment": "Open to both",
            "count": 381
        },
              ]
    }

This is the keys array

["nationality", "gender","country","preferred_role","work_experience","count","preferred_work_environment"]

so, `data.data[0].nationality` would be `Indonesia` ... does that help you undertand how to access the data? — Bravo, Feb 23 '22 at 11:59
Does this answer your question? [Create html table dynamically with Javascript Object](https://stackoverflow.com/questions/45331539/create-html-table-dynamically-with-javascript-object) — pilchard, Feb 23 '22 at 11:59
No buddy it can actually change so if its nationality today in next request it can be something else thats why i took the keys out of them @Bravo — Adeel Shahid, Feb 23 '22 at 12:01
The problem is i can hardcode the key if its nationality in this array next time it can be something else and so on — Adeel Shahid, Feb 23 '22 at 12:02
oh, right ... so the keys in the objects could be absolutely anything ... use `Object.keys(data.data[0])` to get the list of keys — Bravo, Feb 23 '22 at 12:05
Alright i got the keys here now the problem for me is how can i loop through data and show using thos keys — Adeel Shahid, Feb 23 '22 at 12:06

score 0 · Answer 1 · answered Feb 23 '22 at 12:19

This is a simple example of how iterates object's properties:

var data = {
    "data": [{
        "nationality": "Indonesia",
        "gender": "Male",
        "country": "Indonesia",
        "preferred_role": "Customer Service",
        "work_experience": "More than 1 year and less than 2 years",
        "preferred_work_environment": "Open to both",
        "count": 381
    }, ]
};

for (let i in data.data[0]) {
    console.log(i);
}

For more details, you can read:

score 0 · Answer 2 · answered Feb 23 '22 at 12:47

By using object.entries you can get key and values of a object.

for (const [key, value] of Object.entries(data.data[0])) {
      console.log(`${key}: ${value}`);
    }

By this method you will get array of keys so,you can use them

Object.keys(data.data[0])

By this method you will get values of a object

Object.values(data.data[0])

score 0 · Answer 3 · answered Feb 23 '22 at 14:09

Here is a snippert that lets you list all key/value pairs of all objects contained in a data array:

const data = {"data": [{
            "nationality": "Indonesia",
            "gender": "Male",
            "country": "Indonesia",
            "preferred_role": "Customer Service",
            "work_experience": "More than 1 year and less than 2 years",
            "preferred_work_environment": "Open to both",
            "count": 381
           },{
            "nationality": "German",
            "gender": "Female",
            "country": "France",
            "passion": "coding",
            "preferred_role": "Support",
            "work_experience": "More than 20 years",
            "preferred_work_environment": "virtual",
            "count": 524
           } ] };
           
document.querySelector("table").innerHTML = data.data.map(ob=>
    "<tr><td><table>"
   +Object.entries(ob).map(el=>`<tr><td class="rgt">${el.join(":</td><td>")}</td></tr>`).join("")
   +"</table></td></tr>").join("");

.border > tbody > tr > td { border: solid 1px grey }
.rgt { text-align: right }

<table class="border"></table>

score 0 · Accepted Answer · answered Feb 23 '22 at 15:01

We can access those keys dynamically via Object.keys() and then perform iteration.

Working Demo :

const arr = [{
  "nationality": "Indonesia",
  "gender": "Male",
  "country": "Indonesia",
  "preferred_role": "Customer Service",
  "work_experience": "More than 1 year and less than 2 years",
  "preferred_work_environment": "Open to both",
  "count": 381
}, {
  "nationality": "USA",
  "gender": "Female",
  "country": "US",
  "preferred_role": "Customer Service",
  "work_experience": "More than 2 years and less than 5 years",
  "preferred_work_environment": "Open to both",
  "count": 382
}];

function tableCreate () {
  var myTable = document.getElementById('myDynamicTable');
  var table = document.createElement('table');
  table.border = '1';
  var tblBody = document.createElement('tbody');
  
  for(var i = 0; i < arr.length; i++){
    var tr = document.createElement('tr');
    tblBody.appendChild(tr)
    for(var j=0; j< Object.keys(arr[i]).length; j++) {
        var td = document.createElement('td');
      td.innerHTML = arr[i][Object.keys(arr[i])[j]];
      tr.appendChild(td);
    }
  }
  
  table.appendChild(tblBody);
  myTable.appendChild(table);
}

tableCreate();

@font-face{
  font-family:'Bitstream Vera Serif Bold',
  src:url('https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf')
}
body{
font-size:90%;
}
table{
  font-family: Arial, serif;
  border-collapse:collapse;
}
table tr, table td{
  border:1px solid #ccc;
  padding: 8px;
}

<div id="myDynamicTable">
</div>

Javascript i need to show data in table from dynamic object keys

4 Answers4