スクリプト言語が初めてです。私はjQueryを使ってJSONファイルの読み込みと解析を行うことにしました。私はスタックオーバーフローから得たリンクの助けを借りてきました。jQueryを使用してローカルシステムでJSONファイルを読み込んで解析する
このJSONファイルはnew.jsonです。
{ "a": [
{"name":"avc"},
{"name":"Anna"},
{"name":"Peter"},
{"Folder": "ABC", "name":[
{"name":"John"},
{"name":"Anna"},
{"Folder":"XYZ", "name":[
{"name":"fdgh"},
{"name":"hdfghh"},
{"Folder":"JKL", "name":[
{"name":"gdfgdfgggggg"},
{"name":"hddddddddddddddddddddddddddddh"},
{"Folder":"PQR", "name":[
{"name":"gddddddg"},
{"name":"ddhh"}
]
}
]
}
]
}
]
}
]
}
そして、これはnew.jsonファイルをロードするための私のコードのjQuery/JavaScriptコードです。私はコードを<script>タグの中に書いています。
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript" language="javascript" src="C:\Users\Girish\Desktop\new.json"></script>
<script type="text/javascript">
var out="<ul>";
var j=0;
function functionName(event) {
$('li[id^="foo"]').click(function(e){
e.stopPropagation();
var x = $(this).last().find(' > ul').clone().find('ul').remove().end();
$('#list').html(x);
$("#list .hide").show();
});
}
$(document).ready(function() {
$('li[id^="foo"]').each(function() {
$(this).on('click', {param: this.id}, functionName);
});
});
function read(obj){
for(var i = 0; i < obj.length; i++)
{
if(obj[i].Folder)
{
var name = "foo"+ ++j;
var name2 = "<li id=" + name + ">";
out = out+ name2 + obj[i].Folder + "<ul>";
document.getElementById("tree").innerHTML = out;
read(obj[i].name);
out=out+"</ul></li></ul>";
}
else
{
var name2 = "<li class=\"hide\">";
out = out+ name2 + obj[i].name;
document.getElementById("tree").innerHTML = out;
out=out+"</li>";
}
}
}
function show()
{
//read(a)
var myItems;
$.getJSON('new.json', function(data) {
myItems = data.a;
read(myItems)
});
}
</script>
これは<body>タグです。
</div>
<div id="list"></div>
私はGoogleのChromeでこのコードを実行しているとき。このエラーが発生しています
jquery-3.1.0.js:9392XMLHttpRequestfile:///C:/Users/Girish/Desktop/new.jsonをロードできません。 Cross originリクエストは、http、data、chrome、chrome-extension、https、chrome-extension-resourceのプロトコルスキームでのみサポートされています。コンソールで。私はこのエラーを探知した、私はMozilla Firefoxで同じファイルを実行すると言ういくつかのリンクを発見した。
Mozilla Firefoxで実行しているのと同じコードですが、何もエラーはありません。それは#tree divの項目を表示しています。しかし、私はtreeのdivの項目をクリックしています。子要素を#list divに表示していません。
ChromeとFirefoxの両方でjsonファイルをロードします。上記のエラーを解決するにはどうすればよいですか？
tree div要素の任意の項目をクリックすると、なぜ子項目はlistのdivに表示されていませんか？
おかげ
スタックオーバーフローはフォーラムではありません。第2号に別の質問を投稿してください。 – Soviut