How to format the received JSON to make it look beautiful?

Question

I get an array of objects and display it on the screen, but the data is not beautiful, how to format to have indents and everything was beautiful, tell me how to do this using js or some kind of library.

 const express = require('express'); const Database = require('./db'); const app = express(); const port = 3000; const db = new Database(); app.use(express.json()); app.get('/gallery', (req, res) => { db.pictures().then(data => { const pictures = JSON.parse(data); res.send(pictures) }) });

How it looks on the screen:

Answer 1

Try

res.send(JSON.stringify(pictures, null, 4);    // stringify with 4 spaces at each level

Taken from here

Either format from backend or from client side using JSON.stringify

JSON.stringify takes more optional arguments.

I recommend formaingt it in client side, as you can use the original JSON for rendering the page.

Answer 2

Human readable

Actually I am not sure why would we display data in Json format to the user, But it's your requirement, so i will roll with it.

There are useful answers and comments that gives you what you want, to display the json well formatted on the screen.

This answer intends to add bit of an edge if you want to display the json data in actual human readable form in an easy way. You can use this if you find necessary.

json.human.js

It takes json input and gives you a structured data as output. Example below: