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"]
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:
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])
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>