Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update what-is-json.md #2081

Merged
merged 3 commits into from
Feb 17, 2019
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 59 additions & 39 deletions locale/en/knowledge/javascript-conventions/what-is-json.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ has become the defacto standard for the web. JSON can be represented
as either a list of values, e.g. an Array, or a hash of properties and
values, e.g. an Object.

// a JSON array
["one", "two", "three"]
```json
// a JSON array
["one", "two", "three"]

// a JSON object
{ "one": 1, "two": 2, "three": 3 }
// a JSON object
{ "one": 1, "two": 2, "three": 3 }
```

## Encoding and Decoding

Expand All @@ -29,28 +31,32 @@ available on the `JSON` object that is available in the global scope.
`JSON.stringify` takes a javascript object or array and returns a
serialized string in the JSON format.

var data = {
name: "John Doe"
, age: 32
, title: "Vice President of JavaScript"
}
```js
const data = {
name: "John Doe",
age: 32,
title: "Vice President of JavaScript"
}

var jsonStr = JSON.stringify(data);
const jsonStr = JSON.stringify(data);

console.log(jsonStr);
console.log(jsonStr);

// prints '{"name":"John Doe","age":32,"title":"Vice President of JavaScript"}'
// prints '{"name":"John Doe","age":32,"title":"Vice President of JavaScript"}'
```

`JSON.parse` takes a JSON string and decodes it to a javascript data
structure.

var jsonStr = '{"name":"John Doe","age":32,"title":"Vice President of JavaScript"}';
```js
const jsonStr = '{"name":"John Doe","age":32,"title":"Vice President of JavaScript"}';

var data = JSON.parse(jsonStr);
const data = JSON.parse(jsonStr);

console.log(data.title);
console.log(data.title);

// prints 'Vice President of JavaScript'
// prints 'Vice President of JavaScript'
```

## What is valid JSON?

Expand All @@ -67,38 +73,42 @@ format. There are several gotchas that can produce invalid JSON as well.

These are all examples of valid JSON.

{"name":"John Doe","age":32,"title":"Vice President of JavaScript"}
```json
{"name":"John Doe","age":32,"title":"Vice President of JavaScript"}

["one", "two", "three"]
["one", "two", "three"]

// nesting valid values is okay
{"names": ["John Doe", "Jane Doe"] }
// nesting valid values is okay
{"names": ["John Doe", "Jane Doe"] }

[ { "name": "John Doe"}, {"name": "Jane Doe"} ]
[ { "name": "John Doe"}, {"name": "Jane Doe"} ]

{} // empty hash
{} // empty hash

[] // empty list
[] // empty list

null
null

{ "key": "\uFDD0" } // unicode escape codes
{ "key": "\uFDD0" } // unicode escape codes
```

These are all examples of bad JSON formatting.

{ name: "John Doe", 'age': 32 } // name and age should be in double quotes
```json
{ name: "John Doe", 'age': 32 } // name and age should be in double quotes

[32, 64, 128, 0xFFF] // hex numbers are not allowed
[32, 64, 128, 0xFFF] // hex numbers are not allowed

{ "name": "John Doe", age: undefined } // undefined is an invalid value
{ "name": "John Doe", "age": undefined } // undefined is an invalid value

// functions and dates are not allowed
{ "name": "John Doe"
, "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT')
, "getName": function() {
return this.name;
}
}
// functions and dates are not allowed
{ "name": "John Doe",
"birthday": new Date('Fri, 26 Jan 2019 07:13:10 GMT'),
"getName": function() {
return this.name;
}
}
```

Calling `JSON.parse` with an invalid JSON string will result in a
SyntaxError being thrown. If you are not sure of the validity of your
Expand All @@ -111,16 +121,26 @@ seem to make sense at first. But remember that JSON is a data format,
not a format for transferring complex javascript objects along with
their functionality.

## JSON Validators

As JSON has become the most widely used data formate with well-defined rules to abide by, there are many validators available to assist your workflow:

* **Online Validators**: If you are just playing around with JSON or checking someone's JSON (without IDEs/editors) then online validators could be of great help. For instance: [jsonlint.com](https://jsonlint.com) is a good online JSON validator and reformatter.
* **npm Packages**: If you are working with a team and want JSON Validation baked into your project or simply like to automate validation in your workflow then the large collection of npm packages are at your disposal. For instance: [jsonlint](https://www.npmjs.com/package/jsonlint) is a pure JavaScript version of the service provided at `jsonlint.com`.
* **Plugins for IDEs/editors**: There are many plugins/extensions available for most of the IDEs/editors which validate JSON for you. Some editors like `VS Code` come with JSON IntelliSense & Validation out of the box.

## JSON in other languages

Although JSON was inspired by the simplicity of javascript data
structures, it's use is not limited to the javascript language. Many
other languages have methods of transferring native hashes and lists
into stringified JSON objects. Here's a quick example in ruby.

require 'json'
```ruby
require 'json'

data = { :one => 1 }
puts data.to_json
data = { :one => 1 }
puts data.to_json

# prints "{ \"one\": 1 }"
# prints "{ \"one\": 1 }"
```