Add Quotes to your Unquoted JSON Objects

#javascript #tips #webdev #productivity

In this article, we will not discuss what JSON or Javascript objects are; or their differences in syntax or usage, many articles have already covered them.

One thing to keep in mind is that, according to specification JSON property names must be double-quoted.

// Example: JavaScript Object
{
    id: "TF_CE8TUEPX2LA",
    status: "PENDING",
    failureReason: null,
    language: "en",
    createdAt: 1669797871000,
    updatedAt: 1669797872000,
    completedAt: null,
    depositInitiatedAt: null,
    cancelledAt: null,
    ...
}

// Example: JSON Object
{
    "id": "TF_CE8TUEPX2LA",
    "status": "PENDING",
    "failureReason": null,
    "language": "en",
    "createdAt": 1669797871000,
    "updatedAt": 1669797872000,
    "completedAt": null,
    "depositInitiatedAt": null,
    "cancelledAt": null,
    ...
}

The requirement to convert a JavaScript object into a JSON object frequently arises while developing web applications. Often one needs to utilize a valid JSON object, for instance, when testing an endpoint with a JSON payload over an HTTP client like Postman or Insomnia.

There is no doubt that your IDE allows you to pick numerous keys and add double quotes to the beginning and end of each key, but imagine if you had 200~300 keys! 🤯

Additionally, you could perform the conversion using the JSON.stringify() method, but who wants that? Right?🥱

I'm not sure if you know this, but you can use the Console tool from Google Chrome DevTools to quickly convert Javascript Object to JSON Object.

Here are the steps..

Copy Unquoted JSON Object on clipboard
Navigate to Chrome Console Tab
Paste Unquoted JSON Object on console
Hit Enter
Right-Click on the result object to see options
Use Copy object option to copy your valid JSON Object and go break the internet!