web-dev-qa-db-ja.com

javascriptを取得して.jsonファイルから読み取るにはどうすればよいですか？

現在、私のスクリプトは次のようになっています。

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

ここで、date "x"およびevent "x"は一連のhtmlタグです。この関数は、ページがロード（オンロード）されるときに実行されます。私の目標は、上記とまったく同じハードコードではなく、ローカルの.jsonファイルからのみ、これとまったく同じことを行うことです。私はすでにチェックアウトしました http://api.jquery.com/jQuery.getJSON/ 。

ローカルの.jsonファイルは次のようになります。

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

助言がありますか？

javascriptjsongetjson
30
MTP

.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"} ];
35
ironchefpython

次のように行うことができます... 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"}]';
3
Javed

注意：2018年7月12日現在、他の回答はすべて時代遅れです。 JSONP ISひどい考えを考えた

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?filename=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からデータを取得できます。これにより、Webページは、ユーザーの操作を中断することなく、ページの一部のみを更新できます。 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/

1
Sheshank S.

実際には、AJAX CALLを探しています。この場合、URLパラメーター値をJSONファイルのリンクに置き換えて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
    }
});
1
Junaid Shahid

データを純粋なJSONとして保存する代わりに、JavaScriptオブジェクトリテラルとして保存します。例えば。

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');
0
Vishnoo Rath