3

Supongamos que copio en un textarea una cadena por ejemplo:

var str = "{ hello: 'world', places: ['Africa', 'America', 'Asia', 'Australia'] }";

Por lo que con JSON.parse(str) parseo el string en formato JSON, pero me gustaría mostrar el resultado en un textarea o algo parecido y formateado-

Además, si modifica algo de ahí y está mal, que de un error. Algo parecido a esta web: https://jsonformatter.org/

Mi controller:

$scope.toParseJson= function (str) {
   $scope.jsonValue = str;
}

$scope.validateJson= function (str) {
   $scope.errors= JSON.parse(str);
}

Mi html

<textarea ng-change="toParseJson(str)" ng-model="str"></textarea><br>
{{errors}}<br>
<textarea ng-change="validateJson(str)" ng-model="jsonValue "></textarea>

1- ¿Cómo consigo que en el segundo textarea me aparezca ordeando con sus tabulaciones y diferenciando?

2- ¿Hay otra manera elegante de mostrar los errores?

3
  • No es complicado, pero has probado a hacer algo? Aqui la gente esta para echar un cable, no hacerte las cosas. Cuelga parte de tu código, muestra tus errores... Echale un ojo a Cómo preguntar
    – GDP
    el 24 ene. 2018 a las 12:01
  • Edito mi pregunta, con código, un saludo
    – sirdaiz
    el 24 ene. 2018 a las 12:10
  • 3
    con JSON.parse(str) parseo el string a json No, el string es el JSON, JSON.parse() crea un objeto Javascript. Javascript Object != Javascript Object Notation, tengamos claros los conceptos el 24 ene. 2018 a las 12:12

1 respuesta 1

5

Validar un JSON

El método JSON.parse() lanza un SyntaxError si la sintaxis es inválida:

let textoJSON = '{ "hello": "world" <<<ERROR>>> "places": ["Africa", "America", "Asia", "Australia"] }',
    objeto;

try {
    objeto = JSON.parse(textoJSON);
    console.log('Sintaxis Correcta');
}
catch (error) {
    if(error instanceof SyntaxError) {
        let mensaje = error.message;
        console.log('ERROR EN LA SINTAXIS:', mensaje);
    } else {
        throw error; // si es otro error, que lo siga lanzando
    }
}



Imprimir un JSON formateado

El método JSON.stringify() convierte un objeto a JSON, y acepta un tercer parámetro con la cantidad de espacios para usar en cada tabulación. Imprimí el resultado en un contenedor que respete los espacios en blanco (ej: un <pre> o un <textarea>).

let textoJSON = '{ "hello": "world", "places": ["Africa", "America", "Asia", "Australia"] }',
    objeto;
    
//Teniendo un objeto...
objeto = JSON.parse(textoJSON);

//Lo convertimos a JSON formateado con 2 espacios
let textoFormateado = JSON.stringify(objeto, undefined, 2);

//Imprimimos
document.write('<pre>' + textoFormateado + '</pre>');

1
  • gracias Mariano, tuve que hacer unos pequeños cambios para hacer lo que realmente necesitaba pero con tu gran ejemplo me fue fácil
    – sirdaiz
    el 29 ene. 2018 a las 10:08

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.