Put certain JSON data arrays into a table after using getJson command

Question

How do I use the below code to pull certain details like country name and capital only into a table with drop down headers? Or can you suggest any plain English Youtube videos where I can learn how to do this or example courses where I can teach myself.

<script>
$(document).ready(function () {

  //for example details in url below
    var url = 'https://restcountries.eu/rest/v1/all'; 

    $.getJSON(url, function (data) {
        console.log(data)
        // var arrItems = [];      // THE ARRAY TO STORE JSON ITEMS.
        // $.each(data, function (index, value) {
        //     arrItems.push(value);       // PUSH THE VALUES INSIDE THE ARRAY.
        // });

        console.log(arrItems)
        // EXTRACT VALUE FOR TABLE HEADER.
        var col = [];
        var arrItems = data.countries;
        console.log(arrItems)
        var firstCountry = arrItems[0]
        console.log(firstCountry)
        for (var i = 0; i < arrItems.length; i++) {
            for (var key in arrItems[i]) {
                if (col.indexOf(key) === -1) {

                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

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

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < arrItems.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = arrItems[i][col[j]];
            }
        }



        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    });
});

score 0 · Answer 1 · answered Mar 16 '18 at 14:47

There's a lot of looping inside of looping, which can increase the time and space complexity - meaning, the more data, the slower this solution will become as well as in general this looks like it will be difficult to maintain.

I would first put as much of the html that you can in the static html and just append the dynamic html to the <tbody>.

You can use the Array.reduce static method to generate a string from your data. One thing you can do to make this easier to understand is stick with either mostly appending DOM nodes or using innerHTML. If you stick with innerHTML, you can create template strings for the cells and the rows.

This will make the code more declarative in nature and functional as well as composeable.

$(document).ready(function() {

  //for example details in url below
  var url = 'https://restcountries.eu/rest/v1/all';

  $.getJSON(url, function(data) {
    const html = buildHTML(data);
    const tbody = document.querySelector('#showData tbody');
    tbody.innerHTML = html;
  });
});


const tableCellTemplate = (val) => {
  return `<td>${val}</td>`;
};

const tableRowTemplate = (val) => {
  return `<tr>${val}</tr>`;
};

function buildHTML(data) {
  return data.reduce((prev, next) => {
    const nameCell = tableCellTemplate(next.name);
    const codeCell = tableCellTemplate(next.alpha2Code);
    return prev + tableRowTemplate(nameCell + codeCell);
  }, '');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showData">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>alpha2Code</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

Put certain JSON data arrays into a table after using getJson command

1 Answers1