how to display json data using just javascript from a local json file or from a webserver?

Question

Hi i am new to using JSON i wanted to know if you can use just javascript (no frameworks) to display all the information in a JSON file as a table.

preferably loading the file locally but using a web server to pull the file is okay.

 [ { "id": "bitcoin", "name": "Bitcoin", "symbol": "BTC", "rank": "1", "price_usd": "8088.05", "price_btc": "1.0", "24h_volume_usd": "9825660000.0", "market_cap_usd": "137294244348", }, { "id": "siacoin", "name": "Siacoin", "symbol": "SC", "rank": "36", "price_usd": "0.0144578", "price_btc": "0.00000178", "24h_volume_usd": "17730600.0", "market_cap_usd": "487999542.0", } ] 

above was the type of data in my file, i would very much appreciate any help thank you

Answer 1

Sounds like a good start would be with the ES6 Fetch API...

Watch the Catch with Fetch. It doesn't catch everything you think it would.

fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() {
    // Your code for handling the data you get from the API
})
.catch(function() {
    // This is where you run code if the server returns any errors
});

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Answer 2

Responding to your question from a broad scope the answer is yes. This is the underlying logic behind most frameworks that provide you with tools to create html datables with javascript (that can load xml, json, csv, etc). However, you display a table in html and you can use javascript to manipulate html. frameworks help to fasten this process so you don't have to reinvent the wheels.

Answer 3

If you don't want to use frameworks, you can use XMLHttpRequest .

As far as I know, you still have to run a web server to do this approach, such as http-server .

Assuming you have three files in one directory, index.html , script.js , and data.json .

index.html

<script type="text/javascript" src="script.js"></script>

script.js

function loadJSON(callback) {

    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'data.json', true); //'data.json' is the relative path of the .json file
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

(function() {
    loadJSON(function(response) {
        var actual_JSON = JSON.parse(response); //Now you can use the actual_JSON variable to build your table
        console.log(JSON.stringify(actual_JSON, null, 2));
    });
})()

data.json

[
    {
        "id": "bitcoin",
        "name": "Bitcoin",
        "symbol": "BTC",
        "rank": "1",
        "price_usd": "8088.05",
        "price_btc": "1.0",
        "24h_volume_usd": "9825660000.0",
        "market_cap_usd": "137294244348"
    },
    {
        "id": "siacoin",
        "name": "Siacoin",
        "symbol": "SC",
        "rank": "36",
        "price_usd": "0.0144578",
        "price_btc": "0.00000178",
        "24h_volume_usd": "17730600.0",
        "market_cap_usd": "487999542.0"
    }
]

Note that I removed the trailing comma in market_cap_usd .

After you set up your local server, just open the web browser and go to localhost:port_number

(I usually use port 3000 or 8080 ).

Credits: https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript

Answer 4

Plain old way of rendering data in table, assuming you have the JSON data in place.

<table id="myTable" border="2">

</table>

<script>

var data = [
    {
        "id": "bitcoin",
        "name": "Bitcoin",
        "symbol": "BTC",
        "rank": "1",
        "price_usd": "8088.05",
        "price_btc": "1.0",
        "24h_volume_usd": "9825660000.0",
        "market_cap_usd": "137294244348",


    }, 
     {
        "id": "siacoin",
        "name": "Siacoin",
        "symbol": "SC",
        "rank": "36",
        "price_usd": "0.0144578",
        "price_btc": "0.00000178",
        "24h_volume_usd": "17730600.0",
        "market_cap_usd": "487999542.0",
        },
     {
        "id": "siacoin 3",
        "name": "Siacoin 3",
        "symbol": "SCD",
        "rank": "32",
        "price_usd": "0.0144578",
        "price_btc": "0.00000178",
        "24h_volume_usd": "17730600.0",
        "market_cap_usd": "487999542.0",
        }
    ];
function renderData(){
  var table = document.getElementById("myTable");
  var tableInfo = '';
  data.forEach((item, index)=> {
    tableInfo += "<tr><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.symbol+"</td><td>"+item.rank+"</td></tr>"
  })
  table.innerHTML = tableInfo;
}

renderData();
</script>