web-dev-qa-db-ja.com

jQueryなしでJavaScriptでJSONファイルを開くにはどうすればよいですか？

JavaScriptでいくつかのコードを書いています。このコードでは、jsonファイルを読みたいです。このファイルはURLからロードされます。

JavaScriptのオブジェクトでこのJSONファイルの内容を取得するにはどうすればよいですか？

たとえば、これは../json/main.jsonにあるJSONファイルです。

{"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]}

そして、私は次のようにtable.jsファイルでそれを使用したい：

for (var i in mainStore)
{       
    document.write('<tr class="columnHeaders">');
    document.write('<td >'+ mainStore[i]['vehicle'] + '</td>');
    document.write('<td >'+ mainStore[i]['description'] + '</td>');
    document.write('</tr>');
}
javascriptjsonxmlhttprequest
19
Rick Weller

JQueryを必要としない例は次のとおりです。

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

次のように呼び出します：

loadJSON('my-file.json',
         function(data) { console.log(data); },
         function(xhr) { console.error(xhr); }
);
43
Drew Noakes

[〜＃〜] xhr [〜＃〜] を使用してファイルを開くことができますが、jQueryを使用すると簡単に行えるため、基本的に自分で苦労しています。 $.getJSON() は、これを非常に簡単にします。コードブロック全体を機能させようとするよりも、1行を呼び出したいのですが、それはあなた次第です...

JQueryを使用したくないのは、私が働いている人がスクリプトの速度を恐れているためにjQueryを使用したくないからです。

ネイティブVS jQueryを適切にプロファイリングできない場合、ネイティブコードをプログラミングすることすらすべきではありません。

恐れることは、彼が何をしているのかわからないことを意味します。パフォーマンスを重視する場合は、実際に特定のコードを高速化する方法を理解する必要があります。 jQueryが遅いと思っているだけなら、間違った道を歩いていることになります...

1
Tamara Wijsman

「jsonファイルを読み取る」とは、jsonコンテンツを返すURLにリクエストを行うことを意味することを理解しています。もしそうなら、この目的のためにjQueryを使用したくない理由を説明できますか？これには完全に適した$ .ajax関数があり、ブラウザーの違いをカバーしています。

ファイルを読みたい場合は、サーバー側で実行する必要があります。 phpを使用して、何らかの方法でdomに提供します（異なる方法があります）。 jsを使用してディスクからファイルを読み取ることはできません。

0
Michal B.

JSONにはnothingがあり、jQueryと関係があります。

現在のコードにはnothing誤りがあります。

変数mainStoreを保存するには、そのjsonの変数です。

そのjsonを変数に保存する必要があります。

var myJSON = {"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]};

var mainStore = myJSON.mainStore;

//.. rest of your code.
0
Neal