How do I display JSON file data into HTML table (using JavaScript only, not jQuery)

Question

I am new to web development and I am making one website. I want to display my JSON data in HTML table using JavaScript. As far I have this code.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>stocksite</title>
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body onload="loadData()">
   <table> 
     <tr>
       <td id="dt"></td>      
     </tr>
   </table>

   <script>
    
    var data, i;
    function loadData() {
        var xhttp = new XMLHttpRequest();
        xhttp.open('GET', 'data.json', true);
        
        xhttp.send();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                data = JSON.parse(xhttp.responseText);
                for(i=0; i<data.stocktrade.length; i++){
                    document.getElementById('dt').innerHTML=data.stocktrade[i].date;
                }
                
            }
            
        }
    }
</script>

and I have JSON file (name:data.json). I want to display date from data.json file.

Answer 1

Something like this?

 // const data = require('/data.json'); Just import the file this way // Say you had a data like following const data = { "stocktrade": [{ "userId": 1, "firstName": "Krish", "lastName": "Lee", "phoneNumber": "123456", "emailAddress": "krish.lee@learningcontainer.com" }, { "userId": 2, "firstName": "racks", "lastName": "jacson", "phoneNumber": "123456", "emailAddress": "racks.jacson@learningcontainer.com" }, { "userId": 3, "firstName": "denial", "lastName": "roast", "phoneNumber": "33333333", "emailAddress": "denial.roast@learningcontainer.com" }, { "userId": 4, "firstName": "devid", "lastName": "neo", "phoneNumber": "222222222", "emailAddress": "devid.neo@learningcontainer.com" }, { "userId": 5, "firstName": "jone", "lastName": "mac", "phoneNumber": "111111111", "emailAddress": "jone.mac@learningcontainer.com" } ] }; var i; function loadData() { const dtable = document.getElementById('dtable'); for (i = 0; i < data.stocktrade.length; i++) { const row = dtable.insertRow(i); const cell0 = row.insertCell(0) cell0.innerHTML = data.stocktrade[i].firstName; const cell1 = row.insertCell(1) cell1.innerHTML = data.stocktrade[i].phoneNumber; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>stocksite</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/stylesheet.css"> </head> <body onload="loadData()"> <table id="dtable"> <tr> <td id="dt"></td> </tr> </table> </body> </html>

How do I display JSON file data into HTML table (using JavaScript only, not jQuery)

Question

1 answers

solution1
0 2021-02-25 00:02:47

How do I display JSON file data into HTML table (using JavaScript only, not jQuery)

Question

1 answers

solution1 0 2021-02-25 00:02:47

solution1
0 2021-02-25 00:02:47