Let's Display The Response From API Beautifully

Probably you have used console.log to display data from API.

import fetch from "node-fetch";

const getDevToData = async() => {
    try {
      const url = "https://dev.to/api/articles";
      const resp = await fetch(url);
      const data = await resp.json();      
      console.log(data[0]); // In this post i just need to check one
    } catch(err) {
        console.log(err);
    }
}

const devData = getDevToData();

Maybe we need to add like the below.

console.log(`id: ${data[0].id}`);
console.log(`title: ${data[0].title}`);

But sometimes we need the entire response which should be readable for us(human). The following small function helps us.

ts

const printObj = (obj:any) => {
  console.log(JSON.stringify(obj, null, 4));
}

js

const printObj = (obj) => {
  console.log(JSON.stringify(obj, null, 4));
}

The screenshot is using Chrome to use TypeScript playground since I'm lazy and don't want to create a project for the following code.
But if you use Nodejs, you will see the difference easily and will like this small function. Actually, this really helps me lol

The number is for indent. I'm using 2 for coding, but still, prefer 4 for JSON.

By the way, I used dev.to API for this post.

dev.to api

https://docs.dev.to/api/#section/Authentication

TypeScript playground