How do I display decoded JSON data in browser

user_7137192 0
Viewed 77

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:

api jquery json javascript
2 Answers

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.

user_54890100

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>

user_101174330
Related