API Response Structure

An API response is the information returned by a server after receiving and processing an API request.

Request
    ↓
REST API
    ↓
Response

The response may contain JSON data, an HTTP status code, and response headers.

A simple JSON API response can look like this:

{
    "message": "Student found"
}

The client receives the JSON object and can use the message in the application.

An API can include a success property to indicate whether an operation was successful.

{
    "success": true,
    "message": "Student found"
}

The mobile application can check the success property before processing the returned data.

A response can contain a data property containing the actual resource.

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

The data object contains the student information.

A message can provide a human-readable description of the result.

{
    "success": true,
    "message": "Student added successfully"
}

Messages are useful for displaying information to users and for debugging API operations.

{
    "success": true,
    "message": "Student found",
    "data": {
        "id": 10,
        "name": "Amit",
        "email": "amit@example.com",
        "course": "React Native"
    }
}

This structure is useful when returning one student from an API.

When an API returns multiple records, the data property can contain an array.

{
    "success": true,
    "message": "Students found",
    "data": [
        {
            "id": 1,
            "name": "Rahul"
        },
        {
            "id": 2,
            "name": "Amit"
        },
        {
            "id": 3,
            "name": "Priya"
        }
    ]
}

An API response contains both an HTTP status and a response body.

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

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

The status code describes the HTTP result, while the JSON body contains application-level information.

A successful GET request can return a list of students.

GET /api/students

200 OK

{
    "success": true,
    "data": [
        {
            "id": 1,
            "name": "Rahul"
        },
        {
            "id": 2,
            "name": "Amit"
        }
    ]
}

After creating a student, the API can return the created record.

POST /api/students

201 Created

{
    "success": true,
    "message": "Student created successfully",
    "data": {
        "id": 15,
        "name": "Rahul",
        "course": "React Native"
    }
}

A PUT request can return the updated resource.

PUT /api/students/15

200 OK

{
    "success": true,
    "message": "Student updated successfully",
    "data": {
        "id": 15,
        "name": "Rahul Kumar",
        "course": "React Native"
    }
}

A DELETE request can return a message indicating that the record was removed.

DELETE /api/students/15

200 OK

{
    "success": true,
    "message": "Student deleted successfully"
}

When an API request fails, the response can contain success set to false and a useful error message.

{
    "success": false,
    "message": "Student not found"
}

The HTTP status code can provide additional information about the error.

HTTP/1.1 404 Not Found
Content-Type: application/json

{
    "success": false,
    "message": "Student not found"
}

The HTTP status and JSON body together provide useful information to the client.

An API can return validation errors when required information is missing.

{
    "success": false,
    "message": "Validation failed",
    "errors": {
        "name": "Name is required",
        "email": "Email is required"
    }
}

This structure allows the mobile application to identify individual field errors.

Some APIs may return multiple errors inside an array.

{
    "success": false,
    "message": "Validation failed",
    "errors": [
        "Name is required",
        "Email is invalid"
    ]
}

The exact error structure should remain consistent throughout an API.

When an API returns a large list, pagination information can be included in the response.

{
    "success": true,
    "data": [
        {
            "id": 1,
            "name": "Rahul"
        },
        {
            "id": 2,
            "name": "Amit"
        }
    ],
    "pagination": {
        "page": 1,
        "limit": 10,
        "total": 50
    }
}

An API can include additional information called metadata.

{
    "success": true,
    "data": [],
    "meta": {
        "page": 1,
        "total": 100
    }
}

Metadata can provide information that helps the client understand the returned data.

A REST API should use a consistent response structure across its endpoints.

For example, successful responses can consistently use:

{
    "success": true,
    "message": "...",
    "data": {}
}

Error responses can consistently use:

{
    "success": false,
    "message": "..."
}

PHP can create a JSON response using an array and json_encode().

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

$response = [
    "success" => true,
    "message" => "Student found",
    "data" => [
        "id" => 1,
        "name" => "Rahul"
    ]
];

echo json_encode($response);

React Native can read the JSON response using the Fetch API.

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

const result = await response.json();

console.log(result);

The returned object can then be used to update the mobile interface.

If the API uses a success property, the mobile application can check it before using the data.

if (result.success) {

    console.log(result.data);

} else {

    console.log(result.message);

}

TypeScript can describe the structure of an API response with an interface.

interface Student {
    id: number;
    name: string;
    course: string;
}

interface StudentResponse {
    success: boolean;
    message: string;
    data: Student;
}

This helps TypeScript understand the expected response structure.

For multiple students, the data property can be an array.

interface StudentResponse {
    success: boolean;
    message: string;
    data: Student[];
}

This is useful when displaying API data in a React Native FlatList.

• Returning different structures from similar endpoints.
• Not setting the correct response Content-Type.
• Returning unclear error messages.
• Mixing arrays and objects without a clear structure.
• Not using appropriate HTTP status codes.
• Returning HTML errors from a JSON API.
• Not validating data before returning it.
• Changing response property names unexpectedly.

A practical JSON response can contain the following properties:

Postman can be used to inspect the complete response from an API.

1. Open Postman.
2. Select the HTTP method.
3. Enter the API URL.
4. Send the request.
5. Check the HTTP status code.
6. Check the response headers.
7. Check the JSON response body.

This is useful for testing a PHP REST API before connecting it to React Native.

React Native
      ↓
HTTP Request
      ↓
PHP REST API
      ↓
Validate Request
      ↓
Database Operation
      ↓
Create Response
      ↓
HTTP Status Code
      ↓
JSON Response
      ↓
React Native

The mobile application receives the response and uses its structure to update the user interface.

Example successful response:

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

{
    "success": true,
    "message": "Student found",
    "data": {
        "id": 10,
        "name": "Rahul",
        "email": "rahul@example.com",
        "course": "React Native"
    }
}

Example error response:

HTTP/1.1 404 Not Found
Content-Type: application/json

{
    "success": false,
    "message": "Student not found"
}

A REST API response should provide enough information for the client to understand what happened. A common structure includes a success indicator, message, data, and optional error or pagination information.

{
    "success": true,
    "message": "Students found",
    "data": [
        {
            "id": 1,
            "name": "Rahul",
            "course": "React Native"
        },
        {
            "id": 2,
            "name": "Amit",
            "course": "React Native"
        }
    ],
    "pagination": {
        "page": 1,
        "limit": 10,
        "total": 2
    }
}

A consistent structure makes REST API integration easier for React Native applications and makes the API easier to maintain.