JSON Introduction

JSON is a text-based format for representing structured data.

Example:

{
    "name": "Rahul",
    "age": 22,
    "course": "React Native"
}

The data is organized using names and values.

JSON stands for:

JavaScript Object Notation

Although JSON originated from JavaScript object notation, it is language-independent and is widely used by different programming languages.

REST APIs commonly use JSON because it provides a simple way to represent structured data.

For example:

{
    "id": 1,
    "name": "Rahul",
    "email": "rahul@example.com"
}

React Native can receive this data from a PHP REST API and use it in the application.

A JSON object is enclosed inside curly braces { }.

{
    "name": "Rahul",
    "age": 22
}

The object contains key-value pairs.

JSON data is commonly represented using key-value pairs.

"name": "Rahul"

Here:

• name is the key.
• Rahul is the value.

The key is normally written inside double quotes.

A JSON string is written inside double quotes.

{
    "name": "Rahul",
    "city": "Patna"
}

Both the keys and string values use double quotes.

JSON can contain numeric values without quotation marks.

{
    "age": 22,
    "fee": 5000
}

Here, 22 and 5000 are numbers.

JSON supports the Boolean values true and false.

{
    "active": true,
    "verified": false
}

Boolean values are not written inside quotation marks.

JSON also supports the null value.

{
    "middleName": null
}

Null can represent the absence of a value.

A JSON array is enclosed inside square brackets [ ].

[
    "HTML",
    "CSS",
    "JavaScript",
    "React Native"
]

An array can contain multiple values.

A JSON array can contain numbers.

{
    "marks": [80, 75, 90, 85]
}

The marks key contains an array of numeric values.

A JSON array can contain multiple objects.

{
    "students": [
        {
            "id": 1,
            "name": "Rahul"
        },
        {
            "id": 2,
            "name": "Amit"
        }
    ]
}

This structure is very common in REST API responses.

A JSON object can contain another object.

{
    "name": "Rahul",
    "address": {
        "city": "Patna",
        "state": "Bihar"
    }
}

Here, address is a nested JSON object.

JSON follows specific syntax rules.

• Objects use curly braces.
• Arrays use square brackets.
• Keys are normally written using double quotes.
• Key and value are separated by a colon.
• Multiple properties are separated by commas.
• String values use double quotes.
• Boolean values use true or false.
• Null is written as null.

A colon : separates a JSON key from its value.

"name": "Rahul"

Here, the colon separates name from Rahul.

Multiple properties in a JSON object are separated by commas.

{
    "name": "Rahul",
    "age": 22,
    "city": "Patna"
}

The comma separates the individual properties.

JSON syntax looks similar to JavaScript object syntax, but JSON is a data format rather than JavaScript code.

JavaScript object:

const student = {
    name: "Rahul",
    age: 22
};

JSON:

{
    "name": "Rahul",
    "age": 22
}

JavaScript provides JSON.stringify() to convert a JavaScript object into a JSON string.

const student = {
    name: "Rahul",
    age: 22
};

const jsonData = JSON.stringify(student);

console.log(jsonData);

This is commonly used when sending JSON data through Fetch.

JavaScript provides JSON.parse() to convert a JSON string into a JavaScript value.

const jsonData =
    '{"name":"Rahul","age":22}';

const student = JSON.parse(jsonData);

console.log(student.name);

This is useful when working with JSON data received from APIs.

A REST API can return JSON data as its response body.

HTTP/1.1 200 OK
Content-Type: application/json

{
    "success": true,
    "data": {
        "id": 1,
        "name": "Rahul"
    }
}

React Native can read this response and display the data.

JSON can also be sent from a mobile application to a REST API.

POST /api/students
Content-Type: application/json

{
    "name": "Rahul",
    "email": "rahul@example.com"
}

The PHP API can read the JSON request body and process the submitted data.

PHP provides json_encode() to convert PHP data into JSON.

$data = [
    "id" => 1,
    "name" => "Rahul"
];

echo json_encode($data);

The output can be sent as a JSON response.

PHP provides json_decode() to convert JSON data into a PHP value.

$json = '{"name":"Rahul","age":22}';

$data = json_decode(
    $json,
    true
);

echo $data['name'];

This is commonly used when processing JSON received from a REST API request.

React Native applications frequently work with JSON when communicating with REST APIs.

const response = await fetch(
    "https://example.com/api/students"
);

const data = await response.json();

console.log(data);

The response.json() method reads the response body as JSON.

Axios can automatically handle JSON request and response data in common REST API scenarios.

const response = await axios.get(
    "https://example.com/api/students"
);

console.log(response.data);

The response data can then be used in React Native components.

Postman can be used to send and receive JSON data while testing REST APIs.

For a POST request:

1. Select the POST method.
2. Enter the API URL.
3. Open Body.
4. Select raw.
5. Select JSON.
6. Enter JSON data.
7. Click Send.

{
    "id": 10,
    "name": "Rahul",
    "age": 22,
    "active": true,
    "skills": [
        "HTML",
        "CSS",
        "React Native"
    ]
}

This JSON object contains numbers, strings, a Boolean value, and an array.

• Using single quotes instead of double quotes for JSON strings.
• Forgetting a comma between properties.
• Adding an unnecessary trailing comma.
• Forgetting a closing brace.
• Forgetting a closing bracket.
• Writing undefined as a JSON value.
• Writing comments inside standard JSON.
• Sending invalid JSON to the API.

React Native
      ↓
JavaScript Object
      ↓
JSON.stringify()
      ↓
POST Request
      ↓
PHP REST API
      ↓
json_decode()
      ↓
MySQL
      ↓
json_encode()
      ↓
JSON Response
      ↓
response.json()
      ↓
React Native

JSON provides a common data format that allows the mobile application and backend API to exchange structured information.

JSON is one of the most important concepts in REST API development. It provides a simple and structured way to exchange information between React Native applications and backend servers.

{
    "success": true,
    "student": {
        "id": 10,
        "name": "Rahul",
        "course": "React Native"
    }
}

In our mobile application course, JSON will be used extensively for GET, POST, PUT, PATCH, DELETE, authentication, Axios, TypeScript interfaces, and React Native API integration.