42

Si tengo una variable string con el siguiente valor:

var myString = "{'nombre':'juan'}";

¿Cómo puedo convertir un string a un objeto JSON en JavaScript?

3
  • 2
    @Flimzy JSON son las siglas para JavaScript Object Notation (en español Notación de Objetos Javascript), así que JSON hace referencia a tal notación y no a un objeto. Por lo tanto no es redundante hablar de un objeto que use esa notación (un objeto JSON). Si tal redundancia existiese, no existiría la clase JSONObject o al menos no le habrían puesto ese nombre, no crees? Commented el 26 dic. 2015 a las 23:00
  • 1
    Quieres convertir el string {'nombre':'juan'} a JSON valido, o quieres convertir un string de JSON valido a un objeto normal?
    – Flimzy
    Commented el 28 dic. 2015 a las 8:36
  • 1
    @CarlosMuñoz: Las respuestas están de acuerdo con mi modificación. Pero si crees que la pregunta es otra cosa, deberíamos pedir clarificación.
    – Flimzy
    Commented el 28 dic. 2015 a las 8:36

5 respuestas 5

39

Asumiendo que escribimos bien la sintaxis de JSON, tu string:

var s = '{"nombre":"juan"}';

¡Ya es JSON!, no necesita ninguna conversión.

La notación JSON es una manera de serializar un objeto JavaScript dentro de un string, por lo que ya tienes un JSON.

Nota: Puedes escribirlo (sin la variable s y sin las comillas simples: {"nombre":"juan"}) en esta página: Json Parser Online para validarlo.

Ahora si lo que quieres es convertirlo a un objeto JavaScript.

var o = JSON.parse(s);

y devolverlo a JSON:

var json = JSON.stringify(o);

Finalmente como menciona @ratlab si tu navegador no soporta el objeto JSON puedes utilizar una librería como json2.js o JSON 3

O utilizar este polyfill de MDN directamente en tu código:

if (!window.JSON) {
    window.JSON = {
        parse: function(sJSON) { return eval('(' + sJSON + ')'); },
        stringify: (function () {
            var toString = Object.prototype.toString;
            var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
            var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
            var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
            var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
            return function stringify(value) {
                if (value == null) {
                    return 'null';
                } else if (typeof value === 'number') {
                    return isFinite(value) ? value.toString() : 'null';
                } else if (typeof value === 'boolean') {
                    return value.toString();
                } else if (typeof value === 'object') {
                    if (typeof value.toJSON === 'function') {
                        return stringify(value.toJSON());
                    } else if (isArray(value)) {
                        var res = '[';
                        for (var i = 0; i < value.length; i++)
                            res += (i ? ', ' : '') + stringify(value[i]);
                        return res + ']';
                    } else if (toString.call(value) === '[object Object]') {
                        var tmp = [];
                        for (var k in value) {
                            if (value.hasOwnProperty(k))
                                tmp.push(stringify(k) + ': ' + stringify(value[k]));
                        }
                        return '{' + tmp.join(', ') + '}';
                    }
                }
                return '"' + value.toString().replace(escRE, escFunc) + '"';
            };
        })()
    };
}

Nota: Ahora que investigo un poco más, de las 3 librerias antes mencionadas, json2.js, JSON 3 y el pollyfill sólo recomiendo JSON 3. El motivo es que el pollyfill es sólo un ejemplo de código probablemente sin soporte y json2.js a pesar de ser la librería original, es una librería antigua, con algunos errores y no coincide con el estándar actual. Más información en la sección Changes from JSON 2 de la documentación de JSON 3

0
8

En JavaScript existen 2 métodos para convertir de string con notación JSON a objeto y viceversa JSON.parse y JSON.stringify:

var obj1 = 'null';
var obj2 = '1';
var obj3 = '"string"';
var obj4 = '[1,2,3]';
var obj5 = '{"double_quote": "any object"}'

console.log(JSON.parse(obj1)); => null
console.log(JSON.parse(obj2)); => 1
console.log(JSON.parse(obj3)); => "string"
console.log(JSON.parse(obj4)); => [1,2,3]
console.log(JSON.parse(obj5)); => {"double_quote": "any object"}

console.log(JSON.stringify(obj3)) => "\"string\""

Debes tener en cuenta que null, true, false también son valores JSON válidos y que las cadenas de caracteres deben incluir una doble comilla al principio y al final de la cadena para ser consideradas como tal, de otra forma se intentará interpretarlas como otro tipo de datos. Expresiones regulares y funciones no lo son ya que JSON es un formato de intercambio de datos y esos últimos son considerados "código".

Puedes encontrar la especificación completa del formato aquí y también en la propia página json.org

Estas funciones están soportadas en la mayoría de los navegadores Chrome, Firefox 3.5+, Internet Explorer 8+, Opera 10.5+ y Safari 4.0+.

En caso de no encontrarse presente se puede emplear la librería JSON2 hecha por el mismo Douglas Crockford el creador de este formato basándose en las estructuras JavaScript existentes.

7

Tomando en cuenta tu código de inicialización:

var myString = "{'nombre':'juan'}";

Solución

Uso de herramientas intrínsecas del lenguaje: JSON.parse()

var objeto = JSON.parse(myString);

La documentación de la MDN nos dice que:

JSON.parse(text[, reviver]): El método JSON.parse() analiza una cadena de texto como JSON, transformando opcionalmente el valor producido por el análisis.


Usar la palabra "objeto JSON" y "texto JSON" quizá sea un pleonasmo pero en realidad es algo tan común que cuando se expresa de esa manera da todo un contexto al receptor del mensaje distinto al que sólo usa JSON.

Esto se puede constatar en la página: JSON in JavaScript.

var myJSONObject ... To convert a JSON text into an object ...

6

Sumar a la respuesta de @dabbbb.

que navegadores como:

  • ie8 hacia adelante.
  • Firefox
  • Chrome

tienen soporte nativo para JSON, en caso de que necesites hacer esto en navegadores mas viejos necesitaras de incluir JSON2

1

Para el caso que exista un string con la estructura de objeto literal, pero que no es una estructura JSON válida porque las claves no están entre comillas (""), se puede utilizar la siguiente función para agregar las comillas y convertirlo en JSON válido, para posteriormente transformar a Objeto.

let textoOriginal = "{name:'TIPO_SOLICITUDES_GIROS',data:[{value:'56',label:'SOLICITADO PARA ANULAR'},{value:'58',label:'SOLICITADO PARA CAMBIO DE BENEFICIARIO'},{value:'126',label:'SOLICITUD LEVANTAMIENTO RESTRICCION'}]}";

Se organiza la estructura del string para convertir a JSON válido, esto se hace agregando las comillas a las claves que existen dentro del string. Para hacerlo se usa el método de string replaceAll, que recibe un valor string a buscar y un valor string por el que se va a reemplazar:

let ejemplo ='string'.replaceAll('stringBuscar','stringRemplazo')
    function ordenarStringComoJson(texto){
      let nuevoString;
       nuevoString = texto.replaceAll('{','{"')
       .replaceAll(':','":')
       .replaceAll(',',',"')
       .replaceAll("'","\"")
       .replaceAll('\,"{',',{');

      return nuevoString
    }

    let stringJson = ordenarStringComoJson(textoOriginal);

Así quedó el nuevo string con la estructura de JSON válida:

let stringJson = '{"name":"TIPO_SOLICITUDES_GIROS","data":[{"value":"56","label":"SOLICITADO PARA ANULAR"},{"value":"58","label":"SOLICITADO PARA CAMBIO DE BENEFICIARIO"},{"value":"126","label":"SOLICITUD LEVANTAMIENTO RESTRICCION"}]}'

Transforma el string con estructura correcta JSON a Objeto

let obj = JSON.parse(stringJson);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.