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?
    }
});

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" 

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.


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.


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

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>

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" }

6

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

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


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).


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

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 .


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.


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.


3

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


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

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>

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"]
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.