Différence entre JSON.stringify et JSON.parse

452

Je ne sais pas trop quand utiliser ces deux méthodes d'analyse.

Après avoir fait écho à mes données json_encoded et les récupérer via ajax, je rencontre souvent une confusion quant au moment où je dois utiliser JSON.stringify et JSON.parse .

Je reçois [object,object]mon console.log lors de l' analyse et un objet JavaScript lorsqu'il est stratifié.

$.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?
    }
});
HIRA THAKUR
la source
1
Pour résumer les réponses ci-dessous: 1. Elles sont inverses les unes des autres. 2. a combiné permet de valider les données ou tourner lisible: json.stringify(json.parse(data)).
Hafenkranich

Réponses:

674

JSON.stringify transforme un objet JavaScript en texte JSON et stocke ce texte JSON dans une chaîne, par exemple:

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 transforme une chaîne de texte JSON en objet JavaScript, par exemple:

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" 
Quentin
la source
9
json.stringify (json.parse (data))? J'ai vu cela dans le code ... il s'agit donc essentiellement de convertir les données json en objet, puis de les reconvertir à nouveau en données json ..
HIRA THAKUR
29
@MESSIAH - Oui. C'est largement inutile, mais pourrait servir de validateur JSON.
Quentin
11
Peut également être utilisé une simple copie d'objet pour les paires de valeurs de clé d'objet.
hunterc
4
Je l'ai trouvé très utile pour le débogage dans la console - cela le rend facilement lisible.
kirgy
2
@Quentin pourriez-vous expliquer à l'aide d'un exemple?
Pardeep Jain
57

JSON.parse()est pour "analyser" quelque chose qui a été reçu en JSON.
JSON.stringify()consiste à créer une chaîne JSON à partir d'un objet / tableau.

Bjorn 'Bjeaurn' S
la source
4
précision: ce n'est peut-être pas un objet.
Denys Séguret du
Certes, cela peut également être un tableau ou tout ce que Javascript reconnaît comme un certain type. Bottomline; il le prend et le convertit en l'équivalent JSON approprié.
Bjorn 'Bjeaurn' S
2
@dystroy - Ce doit être un objet (notant qu'un tableau est un objet).
Quentin
2
@quentinJSON.stringify(3)
Denys Séguret
@dystroy - hein, je ne savais pas qu'ils l'avaient étendu pour traiter les fragments JSON . C'est peu intuitif.
Quentin
43

Ils sont l'inverse l'un de l'autre. JSON.stringify()sérialise un objet JS en une chaîne JSON, tandis que JSON.parse()désérialise une chaîne JSON en un objet JS.

bluehallu
la source
25

Ce sont les opposés les uns des autres.

JSON.stringify ()

JSON.stringify () sérialise un objet ou une valeur JS dans une chaîne 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 ()

La méthode JSON.parse () analyse une chaîne en tant que JSON, transformant éventuellement la valeur produite.

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
Bhushan Gadekar
la source
7
Un meilleur nom pour parse()serait objectify()ou jsonify().
nu everest
Pourquoi pas JSON.toString () et JSON.toObject ()? Je préférerais ces noms (particulièrement utiles pour les nouveaux programmeurs qui utilisent intellisense).
Richard Chassereau
2
vous pourriez avoir post developer.mozilla.org/en/docs/Web/JavaScript/Reference/… au lieu de copier
Mahi
@nueverest jsonify()serait ambigu et trompeur, car parse()ne pas convertir un Stringà un JSONgenre (qui est ce qui jsonify()serait indique), mais parse()convertit un JSON-formaté String à l' un des: Object, Array, Number, String, Booleanou null. Les gens confondent souvent la "représentation de chaîne" JSON et Object(ou dicten Python, etc.).
jbmusso
21

Tout d'abord, la JSON.stringify()fonction convertit une valeur JavaScript en une chaîne JSON (JavaScript Object Notation). JSON.parse()La fonction convertit une chaîne JSON (JavaScript Object Notation) en objet. Pour plus d'informations sur ces deux fonctions, veuillez consulter les liens suivants.

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

Deuxièmement, l'exemple suivant vous sera utile pour comprendre ces deux fonctions.

<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>
Mou
la source
15
var log = { "page": window.location.href, 
        "item": "item", 
        "action": "action" };

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

// La sortie sera:

// Pour la 1ère console est une chaîne comme:

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

// Pour la 2ème console est un objet comme:

Object {
page   : window.location.href,  
item   : "item",
action : "action" }
roi néo
la source
6

JSON.stringify() Convertit un objet en chaîne.

JSON.parse() Convertit une chaîne JSON en objet.

Hamed Kamrava
la source
2
"La perfection est atteinte, non pas quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à emporter." Antoine de Saint-Exupery
Ronnie Royston
6

La vraie confusion ici ne concerne pas l'analyse par rapport à la chaîne de caractères, c'est le type de données du dataparamètre du rappel de réussite.

data peut être soit la réponse brute, c'est-à-dire une chaîne, soit un objet JavaScript, selon la documentation:

Succès

Type: Function (Anything data, String textStatus, jqXHR jqXHR) Fonction à appeler si la requête aboutit. La fonction obtient trois arguments: les données renvoyées par le serveur, formatées selon le paramètre dataType ou la fonction de rappel dataFilter, si spécifiée; <..>

Et le dataType par défaut à un paramètre de «supposition intelligente»

dataType (par défaut: Intelligent Guess (xml, json, script ou html))

Type: chaîne Type de données que vous attendez du serveur. Si aucun n'est spécifié, jQuery essaiera de le déduire en fonction du type MIME de la réponse (un type XML MIME produira du XML, en 1.4 JSON produira un objet JavaScript, en 1.4 le script exécutera le script, et tout le reste sera retourné sous forme de chaîne).

Patrick
la source
2
C'est un ajout très utile, car il aide à comprendre de quoi il s'agit!
rmcsharry
4

Objet JavaScript <-> Chaîne JSON


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

JSON.stringify (obj) - Prend tout objet sérialisable et renvoie la représentation JSON sous forme de chaîne.

JSON.stringify() -> Object To String.

JSON.parse (string) - Prend une chaîne JSON bien formée et retourne l'objet JavaScript correspondant.

JSON.parse() -> String To Object.

Explication: JSON.stringify (obj [, replacer [, espace]]);

Replacer / Space - facultatif ou prend une valeur entière ou vous pouvez appeler la fonction de retour de type entier.

function replacer(key, value) {
    if (typeof value === 'number' && !isFinite(value)) {
        return String(value);
    }
    return value;
}
  • Replacer Just Use pour remplacer non fini non par null.
  • Utilisation de l'espace pour indenter Json String par l'espace
Zigri2612
la source
4

Ils sont à l'opposé l'un de l'autre.

JSON.parse()est utilisé pour analyser les données reçues en tant que JSON ; il désérialise une chaîne JSON en un objet JavaScript .

JSON.stringify()d'autre part est utilisé pour créer une chaîne JSON à partir d'un objet ou d'un tableau ; il sérialise un objet JavaScript en une chaîne JSON .

nyedidikeke
la source
4

Je ne sais pas si cela a été mentionné, mais l'une des utilisations de JSON.parse (JSON.stringify (myObject)) est de créer un clone de l'objet d'origine.

C'est pratique lorsque vous souhaitez jouer avec certaines données sans affecter l'objet d'origine. Probablement pas le moyen le plus propre / le plus rapide mais certainement le plus simple pour les objets qui ne sont pas massivement complexes.

P. Brown
la source
3

JSON.stringify(obj [, replacer [, space]]) - Prend tout objet sérialisable et renvoie la représentation JSON sous forme de chaîne.

JSON.parse(string) - Prend une chaîne JSON bien formée et retourne l'objet JavaScript correspondant.

Gladson Robinson
la source
3

Ils s'opposent. JSON.Stringify()convertit JSON en chaîne et JSON.Parse()analyse une chaîne en JSON.

David Carmona
la source
1

JSON: Il est principalement utilisé pour échanger des données vers / depuis le serveur. Avant d'envoyer l'objet JSON au serveur, il doit s'agir d'une chaîne.

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

Il convertit également le tableau Javascript en chaîne

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 

Lorsque nous recevions les données JSON du serveur, les données étaient au format chaîne, d'où nous convertissons la chaîne en objet 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
Sheo Dayal Singh
la source
1

JSON.parse()est utilisé pour convertir une chaîne en objet.
JSON.stringify()est utilisé pour convertir un objet en chaîne.

Vous pouvez aussi vous référer à cela ...

<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>
journal priya
la source
1

JSON.parse () prend une chaîne JSON et la transforme en objet JavaScript.

JSON.stringify () prend un objet JavaScript et le transforme en chaîne 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"}
Et bien que les méthodes soient généralement utilisées sur des objets, elles peuvent également être utilisées sur des tableaux:
const myArr = ['simon', 'gomez', 'john'];

const myArrStr = JSON.stringify(myArr);

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

console.log(JSON.parse(myArrStr));
// ["simon","gomez","john"]
Bipon Biswas
la source