如何從.json文件中讀取javascript？

Question

我的腳本目前看起來像這樣：

<script type="text/javascript">
  function updateMe(){
    var x = 0;
    var jsonstr = '{"date":"July 4th", "event":"Independence Day"}';
    var activity=JSON.parse(jsonstr);
    while(x<10){
    date = document.getElementById("date"+x).innerHTML = activity.date;
    event = document.getElementById("event"+x).innerHTML = activity.event;
    x++;
    }
  }
</script>

其中日期“x”和事件“x”是一系列html標簽。 此功能在頁面加載（onload）時運行。 我的目標是完成同樣的事情，只能從本地.json文件，而不是我上面的硬編碼。 我已經查看了http://api.jquery.com/jQuery.getJSON/ 。

本地.json文件如下所示：

{"date":"July 4th", "event":"Independence Day"}

有什么建議？

Answer 1

當你說.json文件時，假設你的意思是“在本地文件系統上的文件”。

您需要保存格式為jsonp的json數據，並使用file:// url來訪問它。

您的HTML將如下所示：

<script src="file://c:\\data\\activity.jsonp"></script>
<script type="text/javascript">
  function updateMe(){
    var x = 0;
    var activity=jsonstr;
    foreach (i in activity) {
        date = document.getElementById(i.date).innerHTML = activity.date;
        event = document.getElementById(i.event).innerHTML = activity.event;
    }
  }
</script>

並且文件c：\\ data \\ activity.jsonp包含以下行：

jsonstr = [ {"date":"July 4th", "event":"Independence Day"} ];

Answer 2

你可以這樣做......只需給出你的json文件的正確路徑......

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="abc.json"></script>
             <script type="text/javascript" >
                function load() {
                     var mydata = JSON.parse(data);
                     alert(mydata.length);

                     var div = document.getElementById('data');

                     for(var i = 0;i < mydata.length; i++)
                     {
                        div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
                     }
                 }
        </script>
    </head>
    <body onload="load()">
    <div id= "data">

    </div>
    </body>
</html>

只需獲取數據並將其附加到div ...最初在警報中打印長度。

這是我的Json文件：abc.json

data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';

Answer 3

通知：截至2018年7月12日，其他答案都已過時。 JSONP現在被認為是一個可怕的想法

如果您將JSON作為字符串， JSON.parse()將正常工作。 由於您從文件加載json，因此需要對其執行XMLHttpRequest。 例如（這是w3schools.com示例）：

 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "json_demo.txt", true); xmlhttp.send();

 <!DOCTYPE html> <html> <body> <h2>Use the XMLHttpRequest to get the content of a file.</h2> <p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p> <p id="demo"></p> <p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p> </body> </html>

它在這里不起作用，因為該文件不在此處。 轉到這個w3schools的例子： https ：//www.w3schools.com/js/tryit.asp？filenamename = tryjson_ajax

以下是JSON.parse（）的文檔： https ： //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

這是一個總結：

JSON.parse（）方法解析JSON字符串，構造字符串描述的JavaScript值或對象。 可以提供可選的reviver函數，以在返回結果對象之前對其進行轉換。

這是使用的示例：

 var json = '{"result":true, "count":42}'; obj = JSON.parse(json); console.log(obj.count); // expected output: 42 console.log(obj.result); // expected output: true

以下是來自https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest的 XMLHttpRequests的摘要：

使用XMLHttpRequest（XHR）對象與服務器進行交互。 您可以從URL檢索數據，而無需進行整頁刷新。 這使網頁只更新頁面的一部分，而不會破壞用戶正在做的事情。 XMLHttpRequest在Ajax編程中被大量使用。

如果您不想使用XMLHttpRequests，那么JQUERY方式（我不知道它為什么不適合您）是http://api.jquery.com/jQuery.getJSON/

由於它不起作用，我嘗試使用XMLHttpRequests

您還可以嘗試AJAX請求：

$.ajax({
    'async': false,
    'global': false,
    'url': "/jsonfile.json",
    'dataType': "json",
    'success': function (data) {
        // do stuff with data
    }
});

文檔： http ： //api.jquery.com/jquery.ajax/

Answer 4

實際上，您正在尋找AJAX CALL，您將在其中使用JSON文件的鏈接替換URL參數值以獲取JSON值。

$.ajax({
    url: "File.json", //the path of the file is replaced by File.json
    dataType: "json",
    success: function (response) {
        console.log(response); //it will return the json array
    }
});

Answer 5

而不是將數據存儲為純JSON，而是將其存儲為JavaScript Object Literal; 例如

 window.portalData = [ { "kpi" : "NDAR", "data": [15,152,2,45,0,2,0,16,88,0,174,0,30,63,0,0,0,0,448,4,0,139,1,7,12,0,211,37,182,154] }, { "kpi" : "NTI", "data" : [195,299,31,32,438,12,0,6,136,31,71,5,40,40,96,46,4,49,106,127,43,366,23,36,7,34,196,105,30,77] }, { "kpi" : "BS", "data" : [745,2129,1775,1089,517,720,2269,334,1436,517,3219,1167,2286,266,1813,509,1409,988,1511,972,730,2039,1067,1102,1270,1629,845,1292,1107,1800] }, { "kpi" : "SISS", "data" : [75,547,260,430,397,91,0,0,217,105,563,136,352,286,244,166,287,319,877,230,100,437,108,326,145,749,0,92,191,469] }, { "kpi" : "MID", "data" : [6,17,14,8,13,7,4,6,8,5,72,15,6,3,1,13,17,32,9,3,25,21,7,49,23,10,13,18,36,9,12] } ];

然后，您可以在HTML中執行以下操作

<script src="server_data.js"> </script>


function getServerData(kpiCode)
{
    var elem = $(window.portalData).filter(function(idx){
        return window.portalData[idx].kpi == kpiCode;
     });

    return elem[0].data;
};

var defData = getServerData('NDAR');

如何從.json文件中讀取javascript？

問題描述

5 個解決方案

解決方案1
35 已采納 2011-07-15 17:42:25

解決方案2
3 2017-07-31 19:46:21

解決方案3
1 2018-07-13 04:12:11

解決方案4
1 2018-07-20 06:56:20

解決方案5
0 2019-08-01 10:32:40

如何從.json文件中讀取javascript？

問題描述

5 個解決方案

解決方案1 35 已采納 2011-07-15 17:42:25

解決方案2 3 2017-07-31 19:46:21

解決方案3 1 2018-07-13 04:12:11

解決方案4 1 2018-07-20 06:56:20

解決方案5 0 2019-08-01 10:32:40

解決方案1
35 已采納 2011-07-15 17:42:25

解決方案2
3 2017-07-31 19:46:21

解決方案3
1 2018-07-13 04:12:11

解決方案4
1 2018-07-20 06:56:20

解決方案5
0 2019-08-01 10:32:40