All examples in this post use the swapi.co API

Where Do You Find JSON?

In the network tab, I will very often be observing network traffic, and I'll want to interrogate the message to view it more easily.

So I copy and paste it from the network tab.

I could use an online tool to format it and view it:

• https://jsonformatter.org/
• https://jsonformatter.curiousconcept.com/
• https://jsonformatter-online.com/

Or I could use the browser itself.

Paste the JSON Into the Console

Pasting the JSON into the console will show an interactive view where I can expand and contract the outline and view the JSON.

Pretty Print it Using JavaScript

JavaScript has a built-in JSON class and I can use the stringify method to pretty print an object as JSON to the console.

So I first create an object from the JSON:

bob={"name":"Luke Skywalker"} 

Then I can pretty print the JSON (4 is the indentation level):

JSON.stringify(bob, null, 4) 

e.g

"{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "https://swapi.co/api/planets/1/",
    "films": [
        "https://swapi.co/api/films/2/",
        "https://swapi.co/api/films/6/",
        "https://swapi.co/api/films/3/",
        "https://swapi.co/api/films/1/",
        "https://swapi.co/api/films/7/"
    ],
    "species": [
        "https://swapi.co/api/species/1/"
    ],
    "vehicles": [
        "https://swapi.co/api/vehicles/14/",
        "https://swapi.co/api/vehicles/30/"
    ],
    "starships": [
        "https://swapi.co/api/starships/12/",
        "https://swapi.co/api/starships/22/"
    ],
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "https://swapi.co/api/people/1/"
}"

Free Video Showing How to Pretty Print JSON