JSONデータが正しく挿入されない理由

次のコードを使用してローカルJSONデータをDOMにレンダリングしようとしていますが、動作しません。私は何が間違っているのか分からず、助けていただければ幸いです。JSONデータが正しく挿入されない理由

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script src="model-controller.js"></script> 
</head> 

<body> 
<button id="clickMe" style="background-color: #000; color: white;" onClick="myObj()">Click ME</button> 

</div> 
<div id="demo"></div> 


</body> 
</html>

モデルcontroller.js

var myObj = JSON.parse("item-data.json", function(data) {return data}); 
document.getElementById("demo").innerHTML = data; 
}; 
myObj();

出典

2017-08-25 SDH

JSON.parse関数は、JSONエンコードされたオブジェクトではなく、ファイルへのパスを表す文字列を取得します。

あなたがファイルに

$.getJSON('item-data.json', function(data) {   
    document.getElementById("demo").innerHTML = data; 
});

にアクセスするためにjqueryのを使用することができますファイルを解析またはJavaScriptバニラ、その後JSON.parseを使用してファイルの内容を取得する必要がある場合は、それ：

var request = new XMLHttpRequest(); 
    request.open("GET", "item-data.json", false); 
    request.send(null) 
    var json_obj = JSON.parse(request.responseText); 
    document.getElementById("demo").innerHTML = json_obj;

出典

2017-08-25 21:45:36 Dekel

これは、データを取得し、それを解析し、divのIDが "デモ" に挿入されますか？ – SDH

基本的にはい： – Dekel

それを得ました。応答していただきありがとうございます。 – SDH

JSON.parseパース指定された文字列をJSオブジェクトに追加します。しかし、外部ファイルは読み込まれません。 See this page for more info on the JSON.parse method

あなたがしたいことは、たとえばファイルをフェッチすることです。 jQuery.getJSON,jQuery.getまたはaxios。

jQuery.get('https://api.coinbase.com/v2/prices/spot?currency=USD', (data) => { 
 
    $('#result').text(JSON.stringify(data, null, 2)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<pre id="result"></pre>

出典

2017-08-25 21:48:06 lumio

JSONデータが正しく挿入されない理由

答えて

関連する問題