Embellecer los datos json en la entrada textarea

Solución:

El resaltado de sintaxis es difícil, pero echa un vistazo a este violín para obtener una impresión bonita de un objeto json ingresado en un área de texto. Tenga en cuenta que el JSON debe ser válido para que esto funcione. (Utilice la consola de desarrollo para detectar errores). Compruebe jsLint para obtener un json válido.

El HTML:

<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>

El js:

function prettyPrint() {
    var ugly = document.getElementById('myTextArea').value;
    var obj = JSON.parse(ugly);
    var pretty = JSON.stringify(obj, undefined, 4);
    document.getElementById('myTextArea').value = pretty;
}

Primero intente una entrada simple como: {“a”: “hola”, “b”: 123}

La impresión simple y bonita de JSON se puede hacer con bastante facilidad. Pruebe este código js: (jsFiddle aquí)

// arbitrary js object:
var myJsObj = {a:'foo', 'b':'bar', c:[false,2,null, 'null']};

// using JSON.stringify pretty print capability:
var str = JSON.stringify(myJsObj, undefined, 4);

// display pretty printed object in text area:
document.getElementById('myTextArea').innerHTML = str;

Para este HTML:

<textarea id="myTextArea" cols=50 rows=25></textarea>

Y consulte la documentación de JSON.stringify.

Para el paso de análisis, solo querrás JSON.parse el contenido del área de texto y manejar cualquier error de entrada incorrecta.

Para la parte de formato de su pregunta, utilice JSON.stringify(blob, undefined, 2). Alternativamente, si necesita colores, aquí hay un componente de formato / color JSON simple escrito en React:

const HighlightedJSON = ({ json }: Object) => {
  const highlightedJSON = jsonObj =>
    Object.keys(jsonObj).map(key => {
      const value = jsonObj[key];
      let valueType = typeof value;
      const isSimpleValue =
        ["string", "number", "boolean"].includes(valueType) || !value;
      if (isSimpleValue && valueType === "object") {
        valueType = "null";
      }
      return (
        <div key={key} className="line">
          <span className="key">{key}:</span>
          {isSimpleValue ? (
            <span className={valueType}>{`${value}`}</span>
          ) : (
            highlightedJSON(value)
          )}
        </div>
      );
    });
  return <div className="json">{highlightedJSON(json)}</div>;
};

Véalo funcionando en este CodePen: https://codepen.io/benshope/pen/BxVpjo

¡Espero que ayude!

Si eres un fan de jquery, también puedes usar este pequeño complemento que escribí:

// The plugin
$.fn.json_beautify= function() {
   var obj = JSON.parse( this.val() );
   var pretty = JSON.stringify(obj, undefined, 4);
   this.val(pretty);
};

// Then use it like this on any textarea
$('#myTextArea').json_beautify();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="myTextArea" cols=50 rows=10>{"name":"John","age":30}</textarea>

---

---

Utiliza Nuestro Buscador