title: "Replicating Working API Submission With Nested Json Object Using Postman" date: "2018-11-12" coverImage: "Screenshot-2018-11-12-at-11.18.21-AM.png"

I am fond of using Postman to test against my API backend. Today, I have a particular problem while testing because I have a nested Json object as part of my request payload.

The specific problem is my usual way of replicating a working API submission couldn't properly recreate a nested Json object.

I overcome that and found a couple of new tricks I want to share in this article.

Therefore, in this article, I will :

  1. show you my usual way of creating an API submission in Postman using the key-value pair interface
  2. throw in a bonus trick I discover about copy and pasting from payload from Chrome to Postman
  3. finally end with a near-perfect way to create nested Json object correctly in Postman

Let's begin!

Part 1: How to Replicate in Postman Using Key-Value Pair Interface

In Postman, I typically copy and paste the values of the Request Payload from Chrome Dev Tools into Params section of the Postman form.

[caption id="attachment_339" align="alignnone" width="800"] Figure 1: Request Payload in Chrome Dev Tools[/caption]

[caption id="attachment_340" align="alignnone" width="600"] Figure 2: Params section in Postman[/caption]

Usually I will type in one key-value pair at a time. Now, let's use a different example to illustrate how you can type in the nested Json object one at a time.

Suppose your raw Json is this:

"Items": [ { "sku": "9257", "price": "100" } ]

You can type directly into the key-value interface this way.

[caption id="attachment_351" align="alignnone" width="656"] Figure 3: An example of using the key-value interface in Postman. Image courtesy via StackOverflow[/caption]

If I were to do the same for the deeply nested Json object in Figure 1, it will be tedious and time-consuming. Is there a better way to do this?

This leads us to Part 2 where I show you how you can quickly copy paste existing payload from Chrome to Postman.

Part 2: How to Replicate Payload Copy-Pasting From Chrome to Postman Fast

Here's a quick tip about copy pasting from Chrome Dev Tools to Postman that isn't obvious to most users.

You can click the view source in Request Payload inside Chrome Dev Tools. Copy the entire source and directly paste into the Params section of Postman.

[caption id="attachment_341" align="alignnone" width="600"] Figure 4: After switching the Request Payload to raw Json string[/caption]

[caption id="attachment_346" align="alignnone" width="600"] Figure 5: Copy pasting from Chrome to Postman Params (Neat trick!)[/caption]

I have shown in Part 1 how to type in nested Json directly into the key-value pair interface which Postman provides. This method is fine if your payload has only a few key-value pairs. However, it can be time-consuming and error-prone for a complicated payload.

Therefore, in Part 2, I've shown a faster and more accurate way to replicate a complicated payload. However, this creates another issue.

The Issue With Copy Pasting Directly Into Postman

When I use the copy-paste method, and I happen to have nested Json object in my values, the nested object will come out as [object Object] as you can see here.

[caption id="attachment_343" align="alignnone" width="600"] Figure 6: Nested Json object in Postman showing up in Params (You don't want this)[/caption]

Let me recap thus far:

  1. I can type in the key-value pair one at a time but it takes too long and error-prone.
  2. I can copy paste from Chrome but I end up losing the details of the nested object.

So is there a better way that can give us the best of both worlds? Where we can replicate an existing working API submission quickly with all the rich details of the nested Json object? The answer is in Part 3.

Part 3: Sending Nested Json Object As Payload in Postman

So these are the exact steps to send out nested Json object in your request payload in Postman.

  1. If you are sending a nested Json object, you're probably sending as PATCH or POST or PUT request. Change accordingly.

  2. Make sure your Headers contain a Content-Type and Accept with the values application/json

    [caption id="attachment_344" align="alignnone" width="600"] Figure 7: Headers should look like this in Postman[/caption]

    3. In Body, choose raw and JSON(application/json) and then paste your raw payload in the Json string format into it. In my case, I simply repeated the same copy and paste routine except this time I pasted the payload into this section.

    [caption id="attachment_345" align="alignnone" width="800"] Figure 8: Body should look like this in Postman[/caption]

As you can see from Figure 8, the nested Json object is clearly visible with all the intricacies in it.

In conclusion, these 3 steps should ensure that you are sending nested Json objects as part of your request payload successfully. And if you want to prettify the raw Json string, you can click on the Beautify link on the right.

What If You Still Prefer Using Postman's Key-Value Interface?

If you want to still use Postman's key-value interface, I recommend it provided that:

  1. your nested object is not too complicated. Maybe maximum 2 levels deep. Or less than 3 objects in a single array.
  2. you cannot copy paste from an existing working API submission which was my case in the example above

Otherwise, you're better off with the approach using the raw Body in Postman as explained in Part 3.

What Have I Covered?

In conclusion, I have shown you two ways to enter nested Json object:

  1. the raw Body section to send using the full Json string of your payload (recommended for complex payload)
  2. the key-value interface (only if you like to type in one by one and your payload is not complicated)

In addition, I have shown you a trick on how to copy paste payload info from Chrome to Postman.

Did I miss out anything with regards to nested Json object in Postman? Let me know in the comments below!

I intend to make every page in my blog authoritative on the topic they are written about. So, I appreciate every helpful comment.