Estoy trabajando en un proyecto personal, Un clon de cartero. Estoy usando fetch API para obtener los datos y luego uso JSON.stringify() para convertir eso en una cadena y mostrarlo dentro de un "área de texto", que es el campo "Respuesta", como puede ver a continuación. Encontré una respuesta: https://stackoverflow.com/questions/2614862/how-can-i-beautify-json-programmatically, pero parece que no funciona para mí.
¿Cómo puedo formatear el objeto json o la cadena y mostrarlo dentro de la pestaña "Respuesta"?
**Here is the html code for the response field** <div class="responseBox"> Response <textarea class="responseText" id="responseId" ></textarea> </div> **JS code for fetching the response using Fetch API and displaying it in Response field :** const response = await fetch(url); console.log("Fetching data..."); const e = await response.json(); console.log(e); responseId.innerText=JSON.stringify(e); **CSS for response field :** .responseText{ width: 705px; height: 350px; position: relative; right: 255px; white-space: pre;}
Como sugiere la respuesta que ha vinculado , la función JSON.stringify admite el formato de cadenas JSON, que es cómo debe formatear cadenas JSON.
JSON.stringify(jsObj, null, "\t"); // stringify with tabs inserted at each level JSON.stringify(jsObj, null, 4); // stringify with 4 spaces at each level