web-dev-qa-db-ja.com

JavaScriptでJSONを解析しますか？

私はJavaScriptでJSON文字列を解析したいです。反応はこんな感じです

var response = '{"result":true,"count":1}';

これからどのように値resultとcountを得ることができますか？

javascriptjsonparsing
1598
user605334

ほとんどのブラウザは JSON.parse() をサポートしています。これはECMA-262 5th Edition（JavaScriptが準拠している仕様）で定義されています。使い方は簡単です。

var json = '{"result":true,"count":1}',
    obj = JSON.parse(json);

alert(obj.count);

/* or ES6 */

const json = '{"result":true,"count":1}' || {};
const { result, count } = JSON.parse(json);
alert(result);
alert(count);

そうでないブラウザには json2.js を使って実装できます。

コメントで述べたように、すでにjQueryを使用している場合は、利用可能であれば$.parseJSONにマッピングするJSON.parse関数、または古いブラウザではevalの形式があります。ただし、これはJSON.parseによっても実行される追加の不要なチェックを実行するので、最高のオールラウンドパフォーマンスを得るためには、次のように使用することをお勧めします。

var json = '{"result":true,"count":1}',
    obj = JSON && JSON.parse(json) || $.parseJSON(json);

これにより、jQueryが文字列をネイティブ解析関数に渡す前に健全性チェックを実行するのではなく、すぐにネイティブJSON.parseを使用するようになります。

1921
Andy E

まず第一に、あなたはJSONコードが有効であることを確認する必要があります。

その後、可能であればjQueryやPrototypeなどのJavaScriptライブラリーを使用することをお勧めします。これらのものはそれらのライブラリーでうまく処理されるからです。

一方、ライブラリを使用したくなく、JSONオブジェクトの有効性を保証することができる場合は、単に文字列を無名関数でラップしてeval関数を使用します。

絶対的に信頼されていない別のソースからJSONオブジェクトを取得している場合、これは推奨されません。eval関数を使用するとコードを無効にできるためです。

これは、eval関数の使用例です。

var strJSON = '{"result":true,"count":1}';
var objJSON = eval("(function(){return " + strJSON + ";})()");
alert(objJSON.result);
alert(objJSON.count);

どのブラウザを使用しているかを制御したり、古いブラウザを使用している人を心配していない場合は、常にJSON.parseメソッドを使用できます。

これは将来のための本当に理想的な解決策です。

101
Clarence Fredericks

もしあなたがこれを外部のサイトから入手しているのであれば、jQueryのgetJSONを使うのが役に立つかもしれません。リストの場合は、$。eachを使用してそれを繰り返すことができます。

$.getJSON(url, function (json) {
    alert(json.result);
    $.each(json.list, function (i, fb) {
        alert(fb.result);
    });
});
57
milestyle

古いブラウザで JSON 3 を使用したい場合は、以下の条件で条件付きで読み込むことができます。

<script>
    window.JSON || 
    document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"><\/scr'+'ipt>');
</script>

クライアントが実行しているブラウザに関係なく、標準のwindow.JSONオブジェクトが利用可能になりました。

35
huwiler

次の例はそれを明確にします。

var jsontext   = '{"name":"x","age":"11"}';
var getContact = JSON.parse(jsontext);
document.write(getContact.name + ", " + getContact.age);

// Output: x, 11

OR

eval関数を使うこともできます。次の例ではeval関数を使用しています。

var jsontext   = '{"name":"x","age":"11"}';
var getContact = eval('(' + jsontext + ')');
document.write(getContact.name + ", " + getContact.age);

// Output: x, 11

JSON.parse関数はeval関数よりも安全で高速に実行されるため、JSON.parse関数を使用することをお勧めします。

34
Joke_Sense10

引用符として二重引用符「 "」を含むMVC @ViewbagからJSON.parseに文字列変数（整形式のJSON文字列）を渡す場合は、JSON.parse（jsonstring）の前に処理する必要があります。

    var jsonstring = '@ViewBag.jsonstring';
    jsonstring = jsonstring.replace(/&quot;/g, '"');
30
Jenna Leaf

他の答えのようにeval関数を使うこともできます。 （余分な波括弧を忘れないでください。）もっと深く掘り下げるとき、またはjQuery関数parseJSONを使用する理由がわかります。

var response = '{"result":true , "count":1}'; 
var parsedJSON = $.parseJSON(response);

OR

以下のコードを使うことができます。

var response = '{"result":true , "count":1}';
var jsonObject = JSON.parse(response);

そしてjsonObject.resultとjsonObject.countを使ってフィールドにアクセスすることができます。

28
Teja

parse()メソッドを使う最も簡単な方法：

var response = '{"a":true,"b":1}';
var JsonObject= JSON.parse(response);

これは、値を取得する方法の例です。

var myResponseResult = JsonObject.a;
var myResponseCount = JsonObject.b;
25
Elenasys

ライブラリを使わなくてもevalを使うことができます - 使うべき唯一の時です。ライブラリを使うほうが安全です。

例えば...

var response = '{"result":true , "count":1}';

var parsedJSON = eval('('+response+')');

var result=parsedJSON.result;
var count=parsedJSON.count;

alert('result:'+result+' count:'+count);
21
El Ronnoco

JSON.parse（）は、関数に渡されたすべてのJSON StringをJSONオブジェクトに変換します。

理解を深めるために、 F12 ブラウザのInspect Elementを開き、コンソールに移動して次のコマンドを入力します。

var response = '{"result":true,"count":1}'; // Sample JSON object (string form)
JSON.parse(response); // Converts passed string to a JSON object.

今コマンドを実行します。

console.log(JSON.parse(response));

Object {result：true、count：1}として出力されます。

そのオブジェクトを使うために、それを変数に割り当てることができます。objとしましょう。

var obj = JSON.parse(response);

objとドット（。）演算子を使用して、JSONオブジェクトのプロパティにアクセスできます。

コマンドを実行してみてください

console.log(obj.result);
21
Pushkar Kathuria

もし良かったら

var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);

jsonObjectによって （。） dotを使用してJSON要素にアクセスできます。

JsonObject.result;
JsonObject.count;
19
user5676965418

JSON.parse(myObject)はうまくいくと思いました。しかし、ブラウザによっては、eval('('+myObject+')')を使う価値があるかもしれません。私が気をつけることをお勧めできる唯一の問題は、JSONのマルチレベルリストです。

13
ha9u63ar

簡単な方法は次のとおりです。

var data = '{"result":true,"count":1}';
var json = eval("[" +data+ "]")[0]; // ;)
11
yassine

Dojo Toolkitを使用する場合 ：

require(["dojo/json"], function(JSON){
    JSON.parse('{"hello":"world"}', true);
});
7
Brendon-Van-Heyzen

他の多くの人が述べたように、ほとんどのブラウザはJSON.parseとJSON.stringifyをサポートしています。

さて、私はあなたが AngularJS （これを強くお勧めします）を使っているなら、それもあなたが必要とする機能を提供することを付け加えたいと思います。

var myJson = '{"result": true, "count": 1}';
var obj = angular.fromJson(myJson);//equivalent to JSON.parse(myJson)
var backToJson = angular.toJson(obj);//equivalent to JSON.stringify(obj)

他の選択肢を提供するためにAngularJSに関するものを追加したいだけでした。 AngularJSは、Internet Explorer 8（およびそれ以前のバージョン）を正式にはサポートしていませんが、経験上、ほとんどのものはうまく機能するようです。

7
user2359695

あなたがjQueryを使用する場合、それは簡単です：

var response = '{"result":true,"count":1}';
var obj = $.parseJSON(response);
alert(obj.result); //true
alert(obj.count); //1
6
legendJSLC