JSON Request Body

A JSON request body contains structured JSON data sent from the client to the server.

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

The server can read this data and process it.

JSON provides a simple and organized way to send multiple related values in one request.

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

The server can easily read each property from the JSON object.

A basic JSON request body contains an object with key-value pairs.

{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
}

Each property is separated using a comma.

POST requests commonly send JSON data in the request body when creating a new resource.

POST /api/students

Content-Type: application/json

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

A PUT request can send a complete updated representation of a resource.

PUT /api/students/25

Content-Type: application/json

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

PATCH can send only the properties that need to be changed.

PATCH /api/students/25

Content-Type: application/json

{
    "course": "React Native"
}

The API can update only the specified field.

The Content-Type request header tells the server what type of data is being sent.

Content-Type: application/json

This is the standard media type used when sending JSON data.

React Native can send JSON using the Fetch API.

const response = await fetch(
    "https://example.com/api/students",
    {
        method: "POST",

        headers: {
            "Content-Type": "application/json"
        },

        body: JSON.stringify({
            name: "Rahul",
            course: "React Native"
        })
    }
);

const data = await response.json();

console.log(data);

Fetch expects the request body to be sent as a suitable body value. When sending a JavaScript object as JSON, JSON.stringify() is used to convert the object into a JSON string.

const student = {
    name: "Rahul",
    course: "React Native"
};

const jsonBody = JSON.stringify(student);

The resulting string can be assigned to the Fetch body property.

Axios can send a JavaScript object as request data.

const response = await axios.post(
    "https://example.com/api/students",
    {
        name: "Rahul",
        course: "React Native"
    }
);

console.log(response.data);

Axios handles the request data and JSON communication according to the request configuration.

Postman can be used to manually send a JSON request body to an API.

1. Select POST, PUT, or PATCH.
2. Enter the API URL.
3. Open the Body tab.
4. Select raw.
5. Select JSON.
6. Enter the JSON data.
7. Click Send.

A student registration API can receive data such as:

{
    "name": "Rahul Kumar",
    "email": "rahul@example.com",
    "mobile": "9876543210",
    "course": "React Native"
}

The API can validate these values before creating the student record.

A login API can receive email and password as JSON.

POST /api/login

{
    "email": "rahul@example.com",
    "password": "mypassword"
}

The server can validate the credentials and return an authentication response.

PHP can read the raw request body using php://input.

$input = file_get_contents(
    "php://input"
);

echo $input;

If the request contains JSON, the variable can contain the JSON text sent by the client.

After reading the JSON body, PHP can convert it into a PHP value using json_decode().

$input = file_get_contents(
    "php://input"
);

$data = json_decode(
    $input,
    true
);

Using true makes the JSON object available as an associative array.

After decoding the JSON, individual properties can be accessed.

$name = $data['name'] ?? '';
$email = $data['email'] ?? '';
$course = $data['course'] ?? '';

echo $name;
echo $email;
echo $course;

The server should verify that valid JSON was received before using the decoded data.

$input = file_get_contents(
    "php://input"
);

$data = json_decode(
    $input,
    true
);

if (!is_array($data)) {

    http_response_code(400);

    echo json_encode([
        "success" => false,
        "message" => "Invalid JSON"
    ]);

    exit;
}

After decoding the JSON, required fields should be checked.

$name = trim(
    $data['name'] ?? ''
);

$email = trim(
    $data['email'] ?? ''
);

if ($name === '' || $email === '') {

    http_response_code(422);

    echo json_encode([
        "success" => false,
        "message" => "Name and email are required"
    ]);

    exit;
}

After validation, the decoded JSON values can be stored in MySQL.

$sql = "INSERT INTO students
        (name, email, course)
        VALUES
        (:name, :email, :course)";

$stmt = $pdo->prepare($sql);

$stmt->execute([
    'name' => $name,
    'email' => $email,
    'course' => $course
]);

Prepared statements should be used for database operations.

After processing a JSON request body, the API can return a JSON response.

header(
    "Content-Type: application/json"
);

echo json_encode([
    "success" => true,
    "message" =>
        "Student created successfully"
]);

JSON request bodies can contain nested objects.

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

The API can access nested values after decoding the JSON.

$city = $data['address']['city'] ?? '';

A JSON request body can also contain arrays.

{
    "name": "Rahul",
    "skills": [
        "JavaScript",
        "TypeScript",
        "React Native"
    ]
}

PHP can access the array after decoding the JSON.

$skills = $data['skills'] ?? [];

TypeScript can define the structure of the JSON data that the application sends.

interface StudentRequest {
    name: string;
    email: string;
    course: string;
}

const student: StudentRequest = {
    name: "Rahul",
    email: "rahul@example.com",
    course: "React Native"
};

This makes the expected request structure easier to understand and helps catch type-related mistakes during development.

const student: StudentRequest = {
    name: "Rahul",
    email: "rahul@example.com",
    course: "React Native"
};

const response = await fetch(
    "https://example.com/api/students",
    {
        method: "POST",

        headers: {
            "Content-Type": "application/json"
        },

        body: JSON.stringify(student)
    }
);

const data = await response.json();

Some APIs require authentication information in headers while the request body contains the actual data.

POST /api/students

Authorization: Bearer YOUR_TOKEN
Content-Type: application/json

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

The authentication header and JSON request body have different purposes.

• Invalid JSON syntax.
• Missing double quotes around string values.
• Missing commas between properties.
• Incorrect property names.
• Missing required fields.
• Incorrect Content-Type.
• Forgetting JSON.stringify() with Fetch.
• Not validating JSON on the server.
• Not handling empty request bodies.
• Using request values directly in unsafe SQL queries.

Postman is useful for testing JSON request bodies before connecting a React Native application.

Example:

POST
https://example.com/api/students

Content-Type:
application/json

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

If the API works correctly in Postman, the same request structure can then be implemented in the mobile application.

React Native Form
       ↓
JavaScript / TypeScript Object
       ↓
JSON.stringify()
       ↓
JSON Request Body
       ↓
POST / PUT / PATCH
       ↓
PHP REST API
       ↓
php://input
       ↓
json_decode()
       ↓
Validation
       ↓
MySQL
       ↓
JSON Response
       ↓
React Native

React Native:

const student = {
    name: "Rahul",
    email: "rahul@example.com",
    course: "React Native"
};

const response = await fetch(
    "https://example.com/api/students",
    {
        method: "POST",

        headers: {
            "Content-Type": "application/json"
        },

        body: JSON.stringify(student)
    }
);

const result = await response.json();

console.log(result);

PHP:

$input = file_get_contents(
    "php://input"
);

$data = json_decode(
    $input,
    true
);

$name = $data['name'] ?? '';
$email = $data['email'] ?? '';
$course = $data['course'] ?? '';

A JSON request body provides a standard way for a React Native application to send structured information to a REST API.

POST /api/students

Content-Type: application/json

{
    "name": "Rahul",
    "email": "rahul@example.com",
    "mobile": "9876543210",
    "course": "React Native"
}

The PHP REST API reads the request body, decodes the JSON, validates the submitted values, performs the required database operation, and returns a JSON response to the mobile application.

This request-body pattern will be used repeatedly in registration, login, student management, profile updates, and other REST API operations.