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:

CodePudding user response：

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.

CodePudding user response：

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");

        var tr = table.insertRow(-1);  

        for (var i = 0; i < col.length; i  ) {
            var th = document.createElement("th"); 
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        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]];
            }
        }

   
        var divContainer = document.getElementById("data");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }

<input type="button" onclick="fetch()" value="Click" />
<p id="data"></p>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>