JSON.stringifyとJSON.parseの違い


452

これらの2つの解析メソッドをいつ使用するかについて混乱しています。

json_encodedデータをエコーし​​てajax経由で取得した後、JSON.stringifyJSON.parseをいつ使用するべきかについて混乱することがよくあります

私が手[object,object]に私にはconsole.log文字列化する場合解析されたときとJavaScriptオブジェクト。

$.ajax({
url: "demo_test.txt",
success: function(data) {
         console.log(JSON.stringify(data))
                     /* OR */
         console.log(JSON.parse(data))
        //this is what I am unsure about?
    }
});

1
以下の答えをまとめると、1.それらは互いに逆です。2.組み合わせることで、データを検証したり、人間が読めるようにしたりできますjson.stringify(json.parse(data))
Hafenkranich、2016年

回答:


674

JSON.stringify JavaScriptオブジェクトをJSONテキストに変換し、そのJSONテキストを文字列に格納します。例:

var my_object = { key_1: "some text", key_2: true, key_3: 5 };

var object_as_string = JSON.stringify(my_object);  
// "{"key_1":"some text","key_2":true,"key_3":5}"  

typeof(object_as_string);  
// "string"  

JSON.parse JSONテキストの文字列をJavaScriptオブジェクトに変換します。例:

var object_as_string_as_object = JSON.parse(object_as_string);  
// {key_1: "some text", key_2: true, key_3: 5} 

typeof(object_as_string_as_object);  
// "object" 

9
json.stringify(json.parse(data))?私はこれをコードで見ました...したがって、これは基本的にjsonデータをオブジェクトに変換し、次に再びそれをjsonデータに再変換しています..
HIRA THAKUR

29
@MESSIAH —はい。それはほとんど無意味ですが、JSONバリデーターとして役立つかもしれません。
クエンティン

11
オブジェクトのキーと値のペアの単純なオブジェクトコピーを使用することもできます。
hunterc 2013年

4
コンソールでのデバッグに非常に役立つことがわかりました-読みやすくしています。
カーギー

2
@クエンティンは例を参考にして説明できますか?
Pardeep Jain

57

JSON.parse()JSONとして受け取ったものを「解析」するためのものです。
JSON.stringify()オブジェクト/配列からJSON文字列を作成することです。


4
精度:オブジェクトではない可能性があります。
DenysSéguret2013

確かに、配列や、JavaScriptが特定の型として認識するものでもかまいません。ボトムライン; それを受け取り、それを適切なJSONに変換します。
ビョルン 'Bjeaurn' S 2013

2
@dystroy —オブジェクトである必要があります(配列はオブジェクトであることに注意してください)。
クエンティン

2
@quentinJSON.stringify(3)
DenysSéguret2013

@dystroy —ええと、JSON フラグメントを処理するように拡張されていることに気付きませんでした。それは直感的ではありません。
クエンティン

43

それらは互いに逆です。JSON.stringify()JSオブジェクトをJSON文字列にJSON.parse()シリアル化しますが、JSON文字列をJSオブジェクトに逆シリアル化します。


25

彼らはお互いの反対です。

JSON.stringify()

JSON.stringify()は、JSオブジェクトまたは値をJSON文字列にシリアル化します。

JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) 
// '"2006-01-02T15:04:05.000Z"'

JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'

JSON.parse()

JSON.parse()メソッドは文字列をJSONとして解析し、オプションで生成された値を変換します。

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

7
のより良い名前parse()は、objectify()またはjsonify()です。
nu everest 2016

JSON.toString()とJSON.toObject()を使用しないのはなぜですか?私はこれらの名前を好みます(特にintellisenseを使用する新しいプログラマーには便利です)。
Richard Chassereau

2
コピーする代わりにdeveloper.mozilla.org/en/docs/Web/JavaScript/Reference/…を投稿することもできます
Mahi

@nueverest jsonify()以降、曖昧と誤解を招くことになるparse()ではない変換StringJSON(何種類jsonify()だろうが示す)が、parse()変換は、JSON形式 Stringのいずれかに:ObjectArrayNumberStringBooleanまたはnull。多くの場合、JSONの「文字列表現」やObject(またはdictPythonなど)を混同します。
jbmusso 2018

21

最初に、JSON.stringify()関数はJavaScript値をJavaScript Object Notation(JSON)文字列に変換します。JSON.parse()関数は、JavaScript Object Notation(JSON)文字列をオブジェクトに変換します。これら2つの機能の詳細については、次のリンクを参照してください。

https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx https://msdn.microsoft.com/library/cc836466(v=vs.94).aspx

次に、次のサンプルは、これら2つの機能を理解するのに役立ちます。

<form id="form1" runat="server">
    <div>
        <div id="result"></div>
    </div>
</form>

<script>
    $(function () {
        //define a json object
        var employee = { "name": "John Johnson", "street": "Oslo West 16", "phone": "555 1234567" };

        //use JSON.stringify to convert it to json string
        var jsonstring = JSON.stringify(employee);
        $("#result").append('<p>json string: ' + jsonstring + '</p>');

        //convert json string to json object using JSON.parse function
        var jsonobject = JSON.parse(jsonstring);
        var info = '<ul><li>Name:' + jsonobject.name + '</li><li>Street:' + jsonobject.street + '</li><li>Phone:' + jsonobject.phone + '</li></ul>';

        $("#result").append('<p>json object:</p>');
        $("#result").append(info);
    });
</script>

15
var log = { "page": window.location.href, 
        "item": "item", 
        "action": "action" };

log = JSON.stringify(log);
console.log(log);
console.log(JSON.parse(log));

//出力は次のようになります:

//最初のコンソールは次のような文字列です:

'{ "page": window.location.href,"item": "item","action": "action" }'

// 2番目のコンソールの場合、次のようなオブジェクトです。

Object {
page   : window.location.href,  
item   : "item",
action : "action" }

6

JSON.stringify() オブジェクトを文字列に変換します。

JSON.parse() JSON文字列をオブジェクトに変換します。


2
「完璧を達成するのは、追加するものがないときではなく、取り除くものが残っていないときです。」アントワーヌドサンテグジュペリ
ロニーロイストン

6

ここでの本当の混乱は、解析と文字列化ではなくdata、成功コールバックのパラメーターのデータ型に関するものです。

data ドキュメントに従って、生の応答、つまり文字列、またはJavaScriptオブジェクトのいずれかになります。

成功

タイプ:Function(Anything data、String textStatus、jqXHR jqXHR)リクエストが成功した場合に呼び出される関数。関数には3つの引数が渡されます。サーバーから返されたデータで、dataTypeパラメータまたはdataFilterコールバック関数(指定されている場合)に従ってフォーマットされています。<..>

また、dataTypeのデフォルトは「インテリジェントな推測」の設定です

dataType(デフォルト:Intelligent Guess(xml、json、script、またはhtml))

タイプ:文字列サーバーから返されると予想されるデータのタイプ。何も指定されていない場合、jQueryは応答のMIMEタイプに基づいてそれを推測しようとします(XML MIMEタイプはXMLを生成し、1.4ではJSONがJavaScriptオブジェクトを生成し、1.4ではスクリプトがスクリプトを実行し、それ以外はすべて文字列として返されます)。


2
これは、混乱の原因を理解するのに役立つため、非常に便利です。
rmcsharry

4

JavaScriptオブジェクト<-> JSON文字列


JSON.stringify() <-> JSON.parse()

JSON.stringify(obj)-シリアル化可能なオブジェクトを受け取り、JSON表現を文字列として返します。

JSON.stringify() -> Object To String.

JSON.parse(string)-整形式のJSON文字列を取り、対応するJavaScriptオブジェクトを返します。

JSON.parse() -> String To Object.

説明: JSON.stringify(obj [、replacer [、space]]);

Replacer / Space-オプションまたは整数値を取るか、整数型の戻り関数を呼び出すことができます。

function replacer(key, value) {
    if (typeof value === 'number' && !isFinite(value)) {
        return String(value);
    }
    return value;
}
  • Replacer Just Useは、有限でないnoをnullに置き換えるために使用します。
  • スペースでJson文字列をインデントするためのスペースの使用

4

彼らは互いに完全に反対です。

JSON.parse()JSONとして受信されたデータの解析に使用されますそれはデシリアライズJSON文字列へのJavaScriptオブジェクトを

JSON.stringify()一方、オブジェクトまたは配列からJSON文字列を作成するために使用されます。それはシリアライズJavaScriptオブジェクトJSON文字列を


4

言及されているかどうかはわかりませんが、JSON.parse(JSON.stringify(myObject))の使用方法の1つは、元のオブジェクトのクローンを作成することです。

これは、元のオブジェクトに影響を与えずにデータをいじくり回したい場合に便利です。おそらく、最もクリーン/最速の方法ではありませんが、それほど複雑ではないオブジェクトの場合は、確かに最も単純です。


3

JSON.stringify(obj [, replacer [, space]]) -シリアル化可能なオブジェクトを受け取り、JSON表現を文字列として返します。

JSON.parse(string) -整形式のJSON文字列を取り、対応するJavaScriptオブジェクトを返します。


3

彼らは互いに対立しています。 JSON.Stringify()JSONを文字列に変換JSON.Parse()し、文字列をJSONに解析します。


1

JSON:主にサーバーとのデータ交換に使用されます。JSONオブジェクトをサーバーに送信する前に、文字列である必要があります。

JSON.stringify() //Converts the JSON object into the string representation.
var jsonData={"Name":"ABC","Dept":"Software"};// It is a JSON object
var jsonString=JSON.stringify(jsonData);// It is a string representation of the object
// jsonString === '{"Name":"ABC","Dept":"Software"}'; is true

また、Javascript配列を文字列に変換します

var arrayObject=["ABC","Software"];// It is array object
var arrString=JSON.stringify(array);// It is string representation of the array (object)
// arrString === '["ABC","Software"]'; is true 

サーバーからJSONデータを受信すると、データは文字列形式になるため、文字列をJSONオブジェクトに変換します。

JSON.parse() //To convert the string into JSON object.
var data='{ "name":"ABC", "Dept":"Software"}'// it is a string (even though it looks like an object)
var JsonData= JSON.parse(data);// It is a JSON Object representation of the string.
// JsonData === { "name":"ABC", "Dept":"Software"}; is true

1

JSON.parse() 文字列をオブジェクトに変換するために使用されます。
JSON.stringify()オブジェクトを文字列に変換するために使用されます。

これも参照できます...

<script type="text/javascript">

function ajax_get_json(){

    var hr = new XMLHttpRequest();
    hr.open("GET", "JSON/mylist.json", true);
    hr.setRequestHeader("Content-type", "application/json",true);
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
           /*  var return_data = hr.responseText; */

           var data=JSON.parse(hr.responseText);
           var status=document.getElementById("status");
           status.innerHTML = "";
           /* status.innerHTML=data.u1.country;  */
           for(var obj in data)
               {
               status.innerHTML+=data[obj].uname+" is in "+data[obj].country+"<br/>";
               }

        }
    }
    hr.send(null);
    status.innerHTML = "requesting...";
}
</script>

1

JSON.parse()はJSON文字列を取り、それをJavaScriptオブジェクトに変換します。

JSON.stringify()はJavaScriptオブジェクトを受け取り、それをJSON文字列に変換します。

const myObj = {
      name: 'bipon',
      age: 25,
      favoriteFood: 'fish curry'
};

 const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"bipon","age":26,"favoriteFood":"fish curry"}"

console.log(JSON.parse(myObjStr));
 // Object {name:"bipon",age:26,favoriteFood:"fish curry"}
また、メソッドは通常オブジェクトで使用されますが、配列でも使用できます。
const myArr = ['simon', 'gomez', 'john'];

const myArrStr = JSON.stringify(myArr);

console.log(myArrStr);
// "["simon","gomez","john"]"

console.log(JSON.parse(myArrStr));
// ["simon","gomez","john"]
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.