DEV Community

Nate
Nate

Posted on

How I learned to love looking at JSON data: JSONBason

#webdev #javascript #tools #productivity

I build a lot of websites and sifting through JSON data in the console sucks.

so I made a tool called JSONBason to convert a JSON object directly into a searchable, sortable table.

Plenty of these tools exist already, the difference here is that JSONBason's API takes in JSON data directly from my dev site's app code so I don't have to upload a CSV or copy/paste the JSON.

The 'id' or kind of user id which is just a session id is destroyed each time JSONBason is reloaded, only your session id can see the JSON you send to it.

It's totally free and open, no sign up and you can test it out below:

  • Grab the code snippet from https://jsonbason.com and paste it into your dev code (yours will always be different with a unique id.) 
// =========== JSONBason-DEV-use-only ===========
const myData = [{"Welcome":"1","To":"2","JSONBason":"3"}];
fetch('https://jsonbason.com/api/json', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: 'BBvbvbsPBPGa4ypMnFxK', JSONdata: myData })
})
  .then(r => r.json())
  .then(data => { console.log('Sent to JSONBason OK'); })
  .catch(console.error);
Enter fullscreen mode Exit fullscreen mode
  • Modify the myData variable to your JSON array and send in JSON data.

JSONBason API call

  • It will be loaded on the JSONBason side in a table.

Embedded JSON API call in dev code

  • If you refresh JSONBason, it will destroy the id which stops it working, update the snippet in your code with the new id when you are ready to use it again, newly generated on each page load.

Any feedback on this would be awesome, thanks for reading!

Top comments (0)