What is JSON? Learn about data formats!

JSON is “data exchange format using JavaScript object notation”.
It is supported by various languages ​​such as Python, PHP, JavaScript, C++, and Java, and it is very easy to pass data between each programming language by sandwiching JSON between them.

In this article, I will explain the outline of JSON and how to write it.

Table of contents

  1. Features of JSON
  2. Differences between JSON and XML
  3. How to write JSON
  4. Data types supported by JSON
  5. Examples of using JSON
  6. lastly

Features of JSON

JSON is an abbreviation for “JavaScript Object Notation”, which is a “data definition method based on how to write objects in JavaScript”.

When creating an object in JavaScript, you use parentheses such as {} and [] to describe it, but JSON is based on that notation. Originally, it is a data structure created with the assumption that it will be used in JavaScript, so it is very compatible with JavaScript. Currently, in addition to JavaScript, it is used in a wide range of languages ​​such as Python, Java, and PHP, and is often used to exchange data between client languages ​​such as JavaScript and server-side languages ​​such as Python.

Differences between JSON and XML

In recent years, JSON is often used to exchange data, but before the appearance of JSON, the data structure called XML was mainly used.
XML is a data definition method based on the notation of HTML and is called a data definition language.
Like HTML, tags can be used to define the structure of data, and because it can be described flexibly, it was able to handle more complex structures than CSV (which was used before XML). However, it was difficult for humans to understand intuitively.

XML example

<?XML version=”1.0″ encoding=”utf-8″?>
<data>
<item>
<id>1</id>
<name>tanaka</name>
</item>
<item>
<id>2 </id>
<name>nakata</name>
</item>
</data>

On the other hand, JSON is defined by JavaScript object notation, so it is very easy to understand for those who are familiar with it.

Also, for example, it is possible to send JSON data from Python and handle it as an object in JavaScript as it is. With XML, it is necessary to parse the XML syntax, which has the disadvantage of degrading the performance of the program.

JSON example

[
{“id”: “1”, “name”: “Tanaka”},
{“id” : “2”, “name” : “nakata”}
]

JavaScript has become a necessity for modern web development. This change in environment can be said to be a factor in the widespread use of JSON.

How to write JSON

Next, let’s see how to write JSON.
If you’ve ever worked with objects in JavaScript, it’s not that complicated.

basic writing

JSON is written in {} with keys and values ​​separated by a colon. The key must be enclosed in double quotes, single quotes will result in an error.

{“key”: “value”}

You can specify multiple key-value pairs by separating them with commas.

{“key1” : “value1”, “key2” : “value2”}

As the number of lines increases, it becomes difficult to read. Use line breaks and indentation.

{
“key1” : “value1”,
“key2” : “value2”,
“key3” : “value3”
}

Data types supported by JSON

JSON supports the following data types:

  • string
  • numerical value
  • null
  • boolean value
  • object
  • arrangement

string

Any characters other than double quotation marks (“) and backslashes (\) can be used in strings (of course, Japanese is also OK).

{“name”: “Tanaka”}

numerical value

Do not enclose numbers in double-quotes. If you enclose it in double quotations, it will be treated as a character string, so be careful.

{“id”, 1}

null

Specify null in all lowercase.

{“id”: null}

boolean value

A bool value (true or false) can also be specified. As with numbers, double quotes are not required here.

{“a”: true, “b”: false}

object

You can also put objects inside objects. This is called “nesting”. At this point, it looks like a data structure.

{
“id”: 1,
“name”: “Tanaka”,
“attribute”: {
“gender”: “male”,
“phone_number”: “XXXX XXXX XXXX”,
“birth”: “1991/01/01”
}
}

arrangement

For objects I used {} but if you want to use an array use [].
You can enter multiple elements in the array by separating them with commas.

{
“id”: 1,
“name”: “Tanaka”,
“result”: [
87,
83,
71,
59,
91
]
}

Examples of using JSON

Finally, let’s use JSON in JavaScript.

Try converting the JSON string to an object and vice versa, converting the object back to a JSON string. Let’s start with the JSON string → object.

Convert JSON string to object

json_str is the JSON string. Passing this to JSON.parse() will convert it to an object. After that, it’s the same as handling a normal object, accessing the element you want to get while connecting with dots. Next, let’s look at converting an object to a JSON string.

JavaScript code

var json_str = ‘{“id”:1, “name”: “Tanaka”, “attribute”:{“gender”: “male”, “phone_number”: “XXXX XXXX XXXX”, “birth”: “1991/01/01 “}}’;
var obj = JSON.parse(json_str)
console.log(obj.name)
console.log(obj.attribute.birth)

result

Tanaka
1991/01/01

Object → Convert to JSON string

obj is a JavaScript object. I am passing this to JSON.stringify() to convert it to a JSON string. If you look at the type with type of, you can see that it is a string.
Objects are fine when used in normal JavaScript, but if you want to exchange data with the server side, it is very convenient to send them as strings.

JavaScript code

var obj = {“id”:1, “name”: “Tanaka”, “attribute”:{” gender”: “male”, “phone_number”: “XXXX XXXX XXXX”, “birth”: “1991/01/01” }}
var json_str = JSON.stringify(obj)
console.log(json_str)
console.log(typeof json_str)

result

{“id”:1, “name”: “Tanaka”, “attribute”:{“gender”: “male”, “phone_number”: “xxxxxxxxxx”, “birth”: “1991/01/01”}}
string

lastly

We have explained JSON as follows.
・Characteristics of JSON ・
Differences between JSON and XML
・How to write
JSON ・Data types supported by JSON
・Examples of using JSON

It might be a good idea to take this opportunity to learn about data formats (JSON, XML, CSV, …) that you will encounter when programming!

-----Reference Information-----
TV Appearance Video: Eejanai Kab Biz (2022/05/29 Broadcast TOKYO MX)
Untouchable Shibata and Arco & Peace are on the regular business information program ” Eejanai Section Biz”, we introduced the programming skill evaluation service ” TOPIC ” and the programming contest ” PG BATTLE ” between companies and schools.

Leave a Comment