DEV Community

Cover image for All you need to know about JSON in 5 minutes
JavaScript Room
JavaScript Room

Posted on

3

All you need to know about JSON in 5 minutes

Hi! I've never thought that JSON can be a topic for a standalone tutorial/post. But recently I got this suggestion from one of my followers on Instagram and decided to make a quick overview of JSON. I actually think now that it might be useful for some devs. So I recorded the 5 minutes video:

You also can get through the points by yourself, it's not difficult for understanding anyway. Let's write it down:

JSON (JavaScript Object Notation) is a lightweight format for storing and transporting data. It's heavily used on modern web.

Syntax

  • File extension is ".json"
  • Root element must be an object or an array
  • All keys must be double-quoted
  • String values must be double-quoted (escape double quotes in the value)
  • Number and boolean values must NOT be double-quoted
  • Comments are not supported by design
  • No trailing commas

A browser's environment, as well as Node.js, has the global object JSON working with this format. Basically, you need to know just two its methods:

  • JSON.parse(argument): string -> object/array
  • JSON.stringify(argument): object/array -> string
// examples
JSON.parse("{\"key\": \"value\"}"); // { key: "value" }
JSON.stringify({key: "value"}); //"{"key":"value"}"

That's what you need to know about JSON. Did I miss something important? Please let me know in comments then.

Thanks for watching/reading and welcome to JavaScript Room blog on Instagram, Twitter, Facebook and Telegram!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay