如何僅使用來自本地json文件或網絡服務器的javascript顯示json數據？

Question

嗨，我是使用JSON的新手，我想知道是否可以僅使用javascript（無框架）將JSON文件中的所有信息顯示為表格。

最好是在本地加載文件，但可以使用Web服務器提取文件。

 [ { "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", } ] 

以上是我文件中的數據類型，非常感謝您的幫助

Answer 1

聽起來不錯的開始是使用ES6 Fetch API ...

觀看抓取趕上。 它無法捕獲您認為會發生的所有事情。

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/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

Answer 2

從廣泛的范圍回答您的問題，答案是肯定的。 這是大多數框架背后的基本邏輯，這些框架為您提供了使用javascript創建html datables的工具（可以加載xml，json，csv等）。 但是，您可以使用html顯示表格，並且可以使用javascript來處理html。 框架有助於加快這一過程，因此您不必重新發明輪子。

Answer 3

如果您不想使用框架，則可以使用XMLHttpRequest 。

據我所知，您仍然必須運行Web服務器來執行此方法，例如http-server 。

假設您在一個目錄中有三個文件index.html ， script.js和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"
    }
]

請注意，我刪除了market_cap_usd的結尾逗號。

設置本地服務器后，只需打開Web瀏覽器並轉到localhost:port_number

（我通常使用端口3000或8080 ）。

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

Answer 4

假設您已准備好JSON數據，這是在表中呈現數據的一種簡單的舊方法。

<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>