Working with JSON Request Bodies

# CHAPTER 8

Working with JSON Request Bodies #

1. Introduction #

2. Learning Objectives #

• Understand the basic syntax rules of JSON.

• Use the Postman "Body" tab to construct raw JSON payloads.

• Differentiate between JSON, form-data, and x-www-form-urlencoded.

• Identify and fix common JSON syntax errors in Postman.

3. Beginner-Friendly Explanation #

If you just throw loose items into the box, your friend won't know how to organize them. You need to package them neatly. JSON is the standardized packaging material of the internet. It forces you to organize your data into clean "Key-Value" pairs, like a dictionary. "Name is John. Age is 30." When the server opens the box, it knows exactly how to read the contents.

4. Real-World Examples #

• Creating a User: A frontend registration form takes the user's input, converts it into a JSON body, and sends a POST request to the API to save it in the database.

• Configuring Settings: A mobile app updates a user's notification preferences by sending a PATCH request with a JSON body containing {"pushNotifications": false}.

5. JSON Syntax Basics #

• Data is in name/value pairs.

• Pairs are separated by commas.

• Curly braces {} hold objects.

• Square brackets [] hold arrays (lists).

• CRITICAL: All keys (names) *must* be wrapped in double quotes "".

• CRITICAL: String values must be wrapped in double quotes "". Numbers and booleans (true/false) do not use quotes.

Valid JSON Example:

{
  "firstName": "John",
  "lastName": "Doe",
  "age": 28,
  "isActive": true,
  "hobbies": ["reading", "gaming"]
}

6. Step-by-Step Tutorial (Sending JSON in Postman) #

1. 1. Open Postman, create a new request.

1. 2. Set the Method to POST.

1. 3. Set the URL to: https://jsonplaceholder.typicode.com/posts

1. 4. Click the Body tab (below the URL bar).

1. 5. Select the raw radio button.

1. 6. Look to the far right of the Body formatting bar. You will see a blue dropdown that says Text. Click it and change it to JSON. *(This automatically adds the Content-Type: application/json header!)*

1. 7. In the large text area, paste the following:

{
  "title": "Learning Postman",
  "body": "JSON bodies are easy once you know the syntax.",
  "userId": 5
}

1. 8. Click Send.

1. 9. The server will respond with a 201 Created status and return your data with a newly generated id.

7. Other Body Formats in Postman #

• form-data: Used specifically when you need to upload physical files (like an image or PDF) alongside text data. It mimics an HTML <form>.

• x-www-form-urlencoded: The default way basic HTML forms send text data. It looks like URL query parameters (name=John&age=30), but it is hidden in the body.

• GraphQL: Postman has a dedicated tab for GraphQL, which allows you to write GraphQL queries instead of raw JSON.

8. Handling JSON Errors in Postman #

Always fix red "x" errors before clicking Send. If Postman flags it, the server will almost certainly reject it with a 400 Bad Request error.

9. Best Practices #

• Use the JSON formatter button: In the Body editor, if your JSON looks messy, right-click anywhere in the editor text and select "Format Document" (or use the shortcut Beautify). This aligns all your brackets perfectly.

• Never put trailing commas: JSON strictly forbids a comma after the last item in an object or array. {"name": "John",} is invalid.

10. Common Mistakes #

• Forgetting to select "JSON" from the dropdown: If you leave the dropdown on "Text", Postman sends the Header Content-Type: text/plain. The server expects JSON, sees "text", and completely ignores your payload, leading to hours of frustrating debugging.

• Using Single Quotes: In JavaScript, {'name': 'John'} is valid. In strict JSON, it is invalid. You MUST use double quotes: {"name": "John"}.

11. Mini Exercises #

1. 1. Look at this snippet: { "score": "100" }. Is the score a number or a string?

1. 2. Find the syntax error in this JSON: {"user": "Admin", "role": "Super" "active": true}

12. Coding/Testing Challenges #

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the difference between raw JSON and form-data in a POST request.

• Q: A developer complains that their POST request is returning a 400 Bad Request or 415 Unsupported Media Type error, even though their JSON looks perfect. What is the most likely mistake they made in Postman? *(Answer: They forgot to set the Content-Type header to application/json, likely by forgetting to change the Text dropdown to JSON).*

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #