Diferencia entre JSON.stringify y JSON.parse

452

Me he confundido sobre cuándo usar estos dos métodos de análisis.

Después de hacer eco de mis datos codificados en json_ y recuperarlos a través de ajax, a menudo me encuentro con confusión sobre cuándo debería usar JSON.stringify y JSON.parse .

Me meto [object,object]en mi console.log cuando se analiza y un objeto JavaScript cuando se stringifica.

$.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
fuente
1
Para resumir las respuestas a continuación: 1. Son inversas entre sí. 2. combinaron ayuda a validar los datos o gire legible: json.stringify(json.parse(data)).
Hafenkranich

Respuestas:

674

JSON.stringify convierte un objeto JavaScript en texto JSON y almacena ese texto JSON en una cadena, por ejemplo:

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 convierte una cadena de texto JSON en un objeto JavaScript, por ejemplo:

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
fuente
99
? JSON.stringify (JSON.parse (datos)) vi esto en el código ... Así que esto es básicamente la conversión de datos JSON en al objeto y luego otra vez reconvertir a los datos JSON ..
IPER THAKUR
29
@MESÍAS - Sí. No tiene mucho sentido, pero podría servir como un validador JSON.
Quentin
11
También se puede utilizar una copia de objeto simple para emparejar valores de clave de objeto.
hunterc
44
Lo encontré muy útil para depurar en la consola, lo hace fácilmente legible.
kirgy
2
@Quentin, ¿podría explicar con la ayuda del ejemplo?
Pardeep Jain
57

JSON.parse()es para "analizar" algo que se recibió como JSON.
JSON.stringify()es crear una cadena JSON a partir de un objeto / matriz.

Bjorn 'Bjeaurn' S
fuente
44
precisión: puede que no sea un objeto.
Denys Séguret
Es cierto que también podría ser una matriz o cualquier cosa que Javascript reconozca como un tipo determinado. Línea de fondo; lo toma y lo convierte al equivalente JSON apropiado.
Bjorn 'Bjeaurn' S
2
@dystroy: tiene que ser un objeto (teniendo en cuenta que las matrices son objetos).
Quentin
2
@quentinJSON.stringify(3)
Denys Séguret
@dystroy - eh, no me di cuenta de que lo habían expandido para tratar con fragmentos JSON . Eso no es intuitivo.
Quentin
43

Son lo contrario el uno del otro. JSON.stringify()serializa un objeto JS en una cadena JSON, mientras JSON.parse()que deserializará una cadena JSON en un objeto JS.

bluehallu
fuente
25

Son los opuestos el uno del otro.

JSON.stringify ()

JSON.stringify () serializa un objeto o valor JS en una cadena 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 ()

El método JSON.parse () analiza una cadena como JSON, opcionalmente transformando el valor producido.

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null
Bhushan Gadekar
fuente
77
Un mejor nombre para parse()sería objectify()o jsonify().
nu everest
¿Por qué no JSON.toString () y JSON.toObject ()? Preferiría estos nombres (especialmente útiles para los nuevos programadores que usan intellisense).
Richard Chassereau
2
podría haber publicado developer.mozilla.org/en/docs/Web/JavaScript/Reference/… en lugar de copiar
Mahi
@nueverest jsonify()sería ambigua y engañosa, ya que parse()no no convertir una Stringa un JSONtipo (que es lo que jsonify()haría indica), pero parse()convierte un formato JSON String a cualquiera de: Object, Array, Number, String, Booleano null. La gente a menudo confunde JSON "representación de cadena" y Object(o dicten Python, etc.).
jbmusso
21

En primer lugar, la JSON.stringify()función convierte un valor de JavaScript en una cadena de notación de objetos de JavaScript (JSON). JSON.parse()La función convierte una cadena de notación de objetos JavaScript (JSON) en un objeto. Para obtener más información sobre estas dos funciones, consulte los siguientes enlaces.

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

En segundo lugar, la siguiente muestra será útil para que comprenda estas dos funciones.

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

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

// El resultado será:

// Para 1st Console es un String Like:

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

// Para la 2da consola hay un objeto como:

Object {
page   : window.location.href,  
item   : "item",
action : "action" }
rey neo
fuente
6

JSON.stringify() Convierte un objeto en una cadena.

JSON.parse() Convierte una cadena JSON en un objeto.

Hamed Kamrava
fuente
2
"La perfección se logra, no cuando no hay nada más que agregar, sino cuando no hay nada más que quitar". Antoine de Saint-Exupery
Ronnie Royston
6

La verdadera confusión aquí no se trata de analizar vs stringify, se trata del tipo de datos del dataparámetro de la devolución de llamada exitosa.

data puede ser la respuesta en bruto, es decir, una cadena, o puede ser un objeto JavaScript, según la documentación:

éxito

Tipo: Función (Cualquier cosa datos, String textStatus, jqXHR jqXHR) Una función que se llamará si la solicitud tiene éxito. La función obtiene tres argumentos: los datos devueltos por el servidor, formateados según el parámetro dataType o la función de devolución de llamada dataFilter, si se especifica; <..>

Y el tipo de datos predeterminado es una configuración de 'conjetura inteligente'

dataType (predeterminado: Intelligent Guess (xml, json, script o html))

Tipo: Cadena El tipo de datos que espera del servidor. Si no se especifica ninguno, jQuery intentará inferirlo en función del tipo MIME de la respuesta (un tipo MIME XML generará XML, en 1.4 JSON generará un objeto JavaScript, en 1.4 el script ejecutará el script, y cualquier otra cosa será devuelto como una cadena).

Patricio
fuente
2
Esta es una adición muy útil, porque ayuda a comprender de qué se trata la confusión.
rmcsharry
4

Cadena JSON de objeto <-> JavaScript


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

JSON.stringify (obj): toma cualquier objeto serializable y devuelve la representación JSON como una cadena.

JSON.stringify() -> Object To String.

JSON.parse (cadena): toma una cadena JSON bien formada y devuelve el objeto JavaScript correspondiente.

JSON.parse() -> String To Object.

Explicación: JSON.stringify (obj [, sustituto [, espacio]]);

Replacer / Space: opcional o toma un valor entero o puede llamar a la función de retorno de tipo entero.

function replacer(key, value) {
    if (typeof value === 'number' && !isFinite(value)) {
        return String(value);
    }
    return value;
}
  • Reemplazar solo Use para reemplazar no no finito con nulo.
  • Uso del espacio para sangrar Json String por espacio
Zigri2612
fuente
4

Son completamente opuestos el uno del otro.

JSON.parse()se utiliza para analizar datos que se recibieron como JSON ; se deserializa una cadena JSON en un objeto JavaScript .

JSON.stringify()por otro lado, se usa para crear una cadena JSON a partir de un objeto o matriz ; que serializa un objeto JavaScript en una cadena JSON .

nyedidikeke
fuente
4

No sé si se ha mencionado, pero uno de los usos de JSON.parse (JSON.stringify (myObject)) es crear un clon del objeto original.

Esto es útil cuando desea meterse con algunos datos sin afectar el objeto original. Probablemente no sea la forma más limpia / rápida, pero ciertamente la más simple para objetos que no son masivamente complejos.

P. Brown
fuente
3

JSON.stringify(obj [, replacer [, space]]) - Toma cualquier objeto serializable y devuelve la representación JSON como una cadena.

JSON.parse(string) - Toma una cadena JSON bien formada y devuelve el objeto JavaScript correspondiente.

Gladson Robinson
fuente
3

Se oponen entre sí. JSON.Stringify()convierte JSON en cadena y JSON.Parse()analiza una cadena en JSON.

David Carmona
fuente
1

JSON: se utiliza principalmente para intercambiar datos hacia / desde el servidor. Antes de enviar el objeto JSON al servidor, debe ser una cadena.

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

También convierte la matriz de Javascript en cadena

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 

Cuando recibimos los datos JSON del servidor, los datos serían el formato de cadena, por lo que convertimos la cadena en un objeto 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
fuente
1

JSON.parse()se usa para convertir String a Object.
JSON.stringify()se utiliza para convertir objetos en cadenas.

Puedes referir esto también ...

<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>
priya log
fuente
1

JSON.parse () toma una cadena JSON y la transforma en un objeto JavaScript.

JSON.stringify () toma un objeto JavaScript y lo transforma en una cadena 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"}
Y aunque los métodos generalmente se usan en objetos, también se pueden usar en matrices:
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
fuente