DEV Community

Cover image for Add Quotes to your Unquoted JSON Objects
Omar for ClickPesa

Posted on


Add Quotes to your Unquoted JSON Objects

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,
Enter fullscreen mode Exit fullscreen mode

The requirement to convert a JavaScript object into a JSON object frequently arises while developing websites. 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..

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

Copy Object on Chrome Console

More tips such as this one that helps you move quickly are shared every month on our Blog. Make sure you take a look at them.

Top comments (0)

Make Your Github Profile Stand Out

Github is great, but have you considered how to make yours more attractive for potential employers or other visitors? Even non-tech ones like recruiters!

Take a couple of hours and show your best side as a person - and a programmer.