I have successfully fetched data from an api URL that I develop and the nested data from api is shown below.
I have logged the result in console log and it is successfully fetched and formatted.
I have tried to display the formatted data in the browser, but no lack.
Html button action on click
<button onclick="fetch();">Click</button>
This where result will be displayed after the all process have done:
<div id="data"></div>
Formatted data:
let data = [
{
"id": 6,
"Name": "Krakatoa",
"Location": "USA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 7,
"Name": "Krakatoa",
"Location": "USA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 9,
"Name": "Krakatoa",
"Location": "KENYA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 10,
"Name": "Krakatoa",
"Location": "KENYA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 11,
"Name": "Krakatoa",
"Location": "AUSTRALIA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
}
]
Process of formatting data:
data.filter( item => {
iterateObject(item);
});
function iterateObject(obj){
for(prop in obj){
if (typeof(obj[prop]) == "object") {
iterateObject(obj[prop]);
}
else {
if (prop == "Name" || prop == "Location" || prop == "History" || prop == "Active")
{
$('#data').html(prop.toUpperCase() + ': ', obj[prop]);
}
}
}
}
Kindly help I am stuck in displaying data in a browser.
NB: It's only displaying: last array name with data i.e Active:
It is displaying only the last row since you are using $.html(), which will replace the content in every iteration. You can replace it with an append like below and check the result.
$('#data').append("<div>" + prop.toUpperCase() + ': ', obj[prop] + "</div>");
PS: I have added div's between the data so that it renders one below the other.
Also you shouldn't be using filter method if you are just iterating over an array. You can use map or forEach for simple iterations.
If you want to show it as a table then you can try this:
function fetch() {
let data = [
{
"id": 6,
"Name": "Krakatoa",
"Location": "USA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 7,
"Name": "Krakatoa",
"Location": "USA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 9,
"Name": "Krakatoa",
"Location": "KENYA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 10,
"Name": "Krakatoa",
"Location": "KENYA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
},
{
"id": 11,
"Name": "Krakatoa",
"Location": "AUSTRALIA",
"History": "The 1883 eruption of Krakatoa",
"Active": "dormant"
}
];
var col = [];
for (var i = 0; i < data.length; i++) {
for (var key in data[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// Creating table
var table = document.createElement("table");
// Table row
var tr = table.insertRow(-1);
// Table header
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
// Adding Data
for (var i = 0; i < data.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = data[i][col[j]];
}
}
// appending whole table to the container
var divContainer = document.getElementById("data");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}<input type="button" onclick="fetch()" value="Click" />
<p id="data"></p>