如何使用本地json文件或网络服务器中的javascript显示json数据?

时间:2018-05-21 15:17:24

标签: javascript json

您好我刚接触使用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",
        }
    ]

以上是我文件中的数据类型,非常感谢任何帮助,谢谢

4 个答案:

答案 0 :(得分:0)

对于ES6 Fetch API来说,一个好的开始......

观看Catch with Fetch。它并没有捕捉到你认为的一切。

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

答案 1 :(得分:0)

从广泛的范围回答您的问题,答案是肯定的。这是大多数框架背后的基础逻辑,它为您提供了使用javascript创建html数据的工具(可以加载xml,json,csv等)。但是,您在html中显示一个表,您可以使用javascript来操作html。框架有助于加快这一过程,因此您不必重新发明轮子。

答案 2 :(得分:0)

如果您不想使用框架,可以使用XMLHttpRequest

据我所知,您仍然需要运行Web服务器来执行此方法,例如http-server

假设您在一个目录中有三个文件,index.htmlscript.jsdata.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

(我通常使用端口30008080)。

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

答案 3 :(得分:0)

在表中呈现数据的简单旧方法,假设您已准备好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>