CODEWITHSUNDEEP
javascripthtmljson
YasserKhalil
YasserKhalil

Reputation: 9538

Create HTML Table Using JSON data in JavaScript

I am still suffering with JavaScript as I am newbie so please be patient to me and guide me step by step .. and please don't overload the comments with links because this made me lost This is the try to bypass the CORS problem

<!DOCTYPE html>
<html>
<head>
    <title>Read data from External JSON file using JavaScript</title>

    <style>
        * { font:17px 'Segoe UI'; }
        table, th, td {
            border: solid 1px #ddd;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <h3>
    	Data extracted from External JSON file and converted to an HTML table
    </h3>
    <div id='showTable'></div>
</body>

<script>
    // Create XMLHttpRequest object.

        const proxyurl = "https://cors-anywhere.herokuapp.com/";
        const url = "https://www.encodedna.com/library/sample.json"; 
        fetch(proxyurl + url) 
        .then(response => response.text())
        .then(contents => createTableFromJSON(contents))
        .catch(() => console.log("No Access " + url + " Response. Blocked By Browser?"))
 


    //var oXHR = new XMLHttpRequest();

    // Initiate request.
    //oXHR.onreadystatechange = reportStatus;
    //oXHR.open("GET", "https://www.encodedna.com/library/sample.json", true);  // get json file.
    //oXHR.send();

    

    // Create an HTML table using the JSON data.
    function createTableFromJSON(jsonData) {
        var arrBirds = [];
        arrBirds = JSON.parse(jsonData); 	// Convert JSON to array.

        var col = [];
        for (var i = 0; i < arrBirds.length; i++) {
            for (var key in arrBirds[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // Create a dynamic table.
        var table = document.createElement// Create table header.

        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 to the table rows.
        for (var i = 0; i < arrBirds.length; i++) {

            tr = table.insertRow(-1);

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

        // Finally, add the dynamic table to a container.
        var divContainer = document.getElementById("showTable");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    };
</script>
</html>

I am getting No access .. How can I read the JSON data and then convert to HTML table?

Upvotes: 1

Views: 3846

Answers (1)

Tamas Szoke
Tamas Szoke

Reputation: 5542

You got a couple of problems, but not with the CORS, you got the results from the request. The error came from the createTableFromJSON function.

The main problems:

  • Forgot to add ("table") after createElement
  • Two unnecessary loops
  • Wrong use of the JSON to get the Name
  • More tr than needed

Working code:

// Create XMLHttpRequest object.
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.encodedna.com/library/sample.json";
fetch(proxyurl + url)
  .then(response => response.text())
  .then(contents => createTableFromJSON(contents))
  .catch((e) => console.log('error'))

// Create an HTML table using the JSON data.
function createTableFromJSON(jsonData) {
  var arrBirds = [];
  arrBirds = JSON.parse(jsonData); // Convert JSON to array.

  var col = [];
  for (var key in arrBirds) {
    if (col.indexOf(key) === -1) {
      col.push(key);
    }
  }

  // Create a dynamic table.
  var table = document.createElement("table") // Create table header.
  var tr = table.insertRow(-1); // Table row. (last position)

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

  tr = table.insertRow(-1); // add new row for the names
  // Add JSON to the table rows.
  for (var i = 0; i < arrBirds.length; i++) {
    var tabCell = tr.insertCell(-1);
    tabCell.innerHTML = arrBirds[i].Name;
  }

  // Finally, add the dynamic table to a container.
  var divContainer = document.getElementById("showTable");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
};
* {
  font: 17px 'Segoe UI';
}

table,
th,
td {
  border: solid 1px #ddd;
  border-collapse: collapse;
  padding: 2px 3px;
  text-align: center;
}

th {
  font-weight: bold;
}
<h3>
  Data extracted from External JSON file and converted to an HTML table
</h3>
<div id='showTable'></div>

I hope this helps!

Upvotes: 3

Related Questions