Base 64 decoding in API response

My question: All I am not a developer but a product person that uses Postman to view and test API request/response messages. I have a question for the community and wanted to see if there is a way to have postman decode base 64 content in an API response and reformat the data to show the decoded data instead of the base 64 data coming back from the API vendor we are integrating with?

Here is sample set of data from the response I would like to have all decoded:
{
“id”: 162,
“thumbUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2ZmNzBmMGY4LWYyOTYtNDQxMi1hNTQwLWY3NjM2NzhlOTUyNS9zcXVhcmVfdGh1bWIvTEhfRUNPLmpwZw==”,
“mediumSquareUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2ZmNzBmMGY4LWYyOTYtNDQxMi1hNTQwLWY3NjM2NzhlOTUyNS9sYXJnZV9zcXVhcmVfdGh1bWIvTEhfRUNPLmpwZw==”,
“largeUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2ZmNzBmMGY4LWYyOTYtNDQxMi1hNTQwLWY3NjM2NzhlOTUyNS9sYXJnZS9MSF9FQ08uanBn”,
“url”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2ZmNzBmMGY4LWYyOTYtNDQxMi1hNTQwLWY3NjM2NzhlOTUyNS9MSF9FQ08uanBn”,
“caption”: “VGhhbmtzIHRvIHRoZSBzbGltIGNvbnN0cnVjdGlvbiBvZiB0aGUgYmFja3Jlc3RzLCBvdXIgc2VhdGluZyBwcm92aWRlcyBtb3JlIGxlZ3Jvb20gc28gdGhhdCB5b3UgY2FuIHN0cmV0Y2ggeW91ciBsZWdzIG91dCBjb21mb3J0YWJseS4=”
},
Thanks for any help or suggestions

Postman supports btoa (binary to ASCII) and atob (ASCII to binary).

Postman JavaScript reference | Using External Libraries

atob - npm (npmjs.com)

const response = pm.response.json();

var atob = require('atob');

console.log(atob(response.thumbUrl));
console.log(atob(response.mediumSquareUrl));
console.log(atob(response.largeUrl));
console.log(atob(response.url));
console.log(atob(response.caption));

@michaelderekjones Thanks again for your assistance but I failed to mention this content repeats for multiple items in the response so it is an array of data. What is the input I should use if this data is part of an array of data? The error received in the postman console is the following “TypeError: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type undefined”

Here is the sample with 2 sets of the API data response

“upaPhotoDescs”: [
{
“id”: 1,
“thumbUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9zcXVhcmVfdGh1bWIvbWFwbGVsZWFmbG91bmdlLTEyLTEyMzIuanBlZw==”,
“mediumSquareUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9sYXJnZV9zcXVhcmVfdGh1bWIvbWFwbGVsZWFmbG91bmdlLTEyLTEyMzIuanBlZw==”,
“largeUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9sYXJnZS9tYXBsZWxlYWZsb3VuZ2UtMTItMTIzMi5qcGVn”,
“url”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9tYXBsZWxlYWZsb3VuZ2UtMTItMTIzMi5qcGVn”,
“caption”: “VGhlIG5ldyBBZXJvcGxhbiBsb3lhbHR5IHByb2dyYW0gaXMgYnVpbHQgYXJvdW5kIHRoZSB3YXkgeW91IHRyYXZlbC4gQm9vayBmbGlnaHRzLCB1cGdyYWRlIHlvdXIgc2VhdCBhbmQgcGF5IGZvciBvbmJvYXJkIFdpLUZpIHdpdGggcG9pbnRzLg==”
},
{
“id”: 2,
“thumbUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9zcXVhcmVfdGh1bWIvQTMyWF9DYWJpbl9VUEFfTEguanBn”,
“mediumSquareUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9sYXJnZV9zcXVhcmVfdGh1bWIvQTMyWF9DYWJpbl9VUEFfTEguanBn”,
“largeUrl”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9sYXJnZS9BMzJYX0NhYmluX1VQQV9MSC5qcGc=”,
“url”: “aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9BMzJYX0NhYmluX1VQQV9MSC5qcGc=”,
“caption”: “RW5qb3kgb3VyIEx1ZnRoYW5zYSBob3NwaXRhbGl0eSBhbmQgYXJyaXZlIHJlbGF4ZWQgYXQgeW91ciBkZXN0aW5hdGlvbi4=”
},

Can you please use the preformatted text option in the editor when posting code examples, JSON, or responses. It stops everything from aligning to the left, making it hard to read.

{
    "upaPhotoDescs": [
        {
            "id": 1,
            "thumbUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9zcXVhcmVfdGh1bWIvbWFwbGVsZWFmbG91bmdlLTEyLTEyMzIuanBlZw==",
            "mediumSquareUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9sYXJnZV9zcXVhcmVfdGh1bWIvbWFwbGVsZWFmbG91bmdlLTEyLTEyMzIuanBlZw==",
            "largeUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9sYXJnZS9tYXBsZWxlYWZsb3VuZ2UtMTItMTIzMi5qcGVn",
            "url": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9tYXBsZWxlYWZsb3VuZ2UtMTItMTIzMi5qcGVn",
            "caption": "VGhlIG5ldyBBZXJvcGxhbiBsb3lhbHR5IHByb2dyYW0gaXMgYnVpbHQgYXJvdW5kIHRoZSB3YXkgeW91IHRyYXZlbC4gQm9vayBmbGlnaHRzLCB1cGdyYWRlIHlvdXIgc2VhdCBhbmQgcGF5IGZvciBvbmJvYXJkIFdpLUZpIHdpdGggcG9pbnRzLg=="
        },
        {
            "id": 2,
            "thumbUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9zcXVhcmVfdGh1bWIvQTMyWF9DYWJpbl9VUEFfTEguanBn",
            "mediumSquareUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9sYXJnZV9zcXVhcmVfdGh1bWIvQTMyWF9DYWJpbl9VUEFfTEguanBn",
            "largeUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9sYXJnZS9BMzJYX0NhYmluX1VQQV9MSC5qcGc=",
            "url": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9BMzJYX0NhYmluX1VQQV9MSC5qcGc=",
            "caption": "RW5qb3kgb3VyIEx1ZnRoYW5zYSBob3NwaXRhbGl0eSBhbmQgYXJyaXZlIHJlbGF4ZWQgYXQgeW91ciBkZXN0aW5hdGlvbi4="
        }
    ]
}

To answer your question.

You would need to target the elements using its array index.

Array indexes start at zero, so for example.

console.log(response.upaPhotoDescs[0].thumbUrl); // 1st record
console.log(response.upaPhotoDescs[1].thumbUrl); // 2nd record
// etc

If there is more than one object and to prevent you having to hardcode the indexes, then will have to loop through the array.

As I don’t know what you want to do with this, the following is just an example that goes through the array and replaces the elements.

const response = pm.response.json();

var atob = require('atob');

response.upaPhotoDescs.forEach(obj => {
    obj.thumbUrl = atob(obj.thumbUrl)
    obj.mediumSquareUrl = atob(obj.mediumSquareUrl);
    obj.largeUrl = atob(obj.largeUrl);
    obj.url = atob(obj.url);
    obj.caption = atob(obj.caption);
});

console.log(response);

From here, you can then console.log the response which will now have its string representation.

Thanks for the suggestion and helping this non developer person. I entered what you provided in the Tests area of my Postman request message and now get the following error returned in the postman console and my data still shows in base 64 in the API response message. “TypeError: Cannot read properties of undefined (reading ‘forEach’)”

As far as your question of what I am trying to do. I am just trying to get the API response message to show the decoded base 64 content in the API response message in Postman as you show in your example.

That means it doesn’t like the variable being passed to it. (It’s not actually a problem with the forEach command).

response.upaPhotoDescs

It needs to be an array, therefore I can only guess that your response is not exactly the same as what I posted.

In which case, can you please post the response up to the second record. The full response please with all the formatting. (Remember to use the pre-formatted text option).

Can you also post the code that you now have in the tests tab.

		"upaPhotoDescs": [
			{
				"id": 1,
				"thumbUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9zcXVhcmVfdGh1bWIvbWFwbGVsZWFmbG91bmdlLTEyLTEyMzIuanBlZw==",
				"mediumSquareUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9sYXJnZV9zcXVhcmVfdGh1bWIvbWFwbGVsZWFmbG91bmdlLTEyLTEyMzIuanBlZw==",
				"largeUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9sYXJnZS9tYXBsZWxlYWZsb3VuZ2UtMTItMTIzMi5qcGVn",
				"url": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zLzA3NmVmMTJjLTg1ZmYtNGVkZS1hMjZhLWY2NjQ1MWM4NmViMy9tYXBsZWxlYWZsb3VuZ2UtMTItMTIzMi5qcGVn",
				"caption": "VGhlIG5ldyBBZXJvcGxhbiBsb3lhbHR5IHByb2dyYW0gaXMgYnVpbHQgYXJvdW5kIHRoZSB3YXkgeW91IHRyYXZlbC4gQm9vayBmbGlnaHRzLCB1cGdyYWRlIHlvdXIgc2VhdCBhbmQgcGF5IGZvciBvbmJvYXJkIFdpLUZpIHdpdGggcG9pbnRzLg=="
			},
			{
				"id": 2,
				"thumbUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9zcXVhcmVfdGh1bWIvQTMyWF9DYWJpbl9VUEFfTEguanBn",
				"mediumSquareUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9sYXJnZV9zcXVhcmVfdGh1bWIvQTMyWF9DYWJpbl9VUEFfTEguanBn",
				"largeUrl": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9sYXJnZS9BMzJYX0NhYmluX1VQQV9MSC5qcGc=",
				"url": "aHR0cHM6Ly91cGFtZWRpYS5hdHBjby5uZXQvcGhvdG9zL2YxMTFlMWY5LTUzYTktNGUyNi1iMGRmLWQ2ZTQ0MzJjMjRmMi9BMzJYX0NhYmluX1VQQV9MSC5qcGc=",
				"caption": "RW5qb3kgb3VyIEx1ZnRoYW5zYSBob3NwaXRhbGl0eSBhbmQgYXJyaXZlIHJlbGF4ZWQgYXQgeW91ciBkZXN0aW5hdGlvbi4="
			},
const response = pm.response.json();

var atob = require('atob');

response.upaPhotoDescs.forEach(obj => {
    obj.thumbUrl = atob(obj.thumbUrl)
    obj.mediumSquareUrl = atob(obj.mediumSquareUrl);
    obj.largeUrl = atob(obj.largeUrl);
    obj.url = atob(obj.url);
    obj.caption = atob(obj.caption);
});

console.log(response);

the message hierachary is like this so do I need to add the “groupedItineararyResponse” before upaphotoDescs.
image

Yes, it would appear so.

The tip when working with JSON structures which can be complex (objects in array, objects in objects, objects in a string) is to start at the top and console log one level at a time.

As soon as you start getting undefined, you need to have a closer look at element and work out if its an object, an array, or potentially an object wrapped in a string that you may need to parse first.

This way, you should eventually get to the element you want or at least understand which elements it starts to fail on (which you can then ask for help with).

As you work with JSON more and more, it will be easier to navigate. It took me six months to understand it properly.

It’s important when asking for help navigating JSON responses to include everything from the beginning up to the element you need (at a minimum). Ideally just post the entire response (unless its thousands of items). If its an array, you need to post at include at least two items from the array.

@michaelderekjones I actually changed this to the following and now seeing the decoded data in the console log but is there a way to see this decoded data in the API response body within postman itself?

const response = pm.response.json();

var atob = require('atob');

response.groupedItineraryResponse.upaPhotoDescs.forEach(obj => {
    obj.thumbUrl = atob(obj.thumbUrl)
    obj.mediumSquareUrl = atob(obj.mediumSquareUrl);
    obj.largeUrl = atob(obj.largeUrl);
    obj.url = atob(obj.url);
    obj.caption = atob(obj.caption);
});

console.log(response);

No, because the API response body in Postman is the actual response which included ASCII data.

That is what the API returned, and you can’t alter that in Postman.

You can only parse it to a JavaScript object for you to work with in conjunction with the console log.

You might want to take a look at what the “Visualizer” can do for you.

@michaelderekjones thanks for all your assistance and help today. Not sure I am equipped with the right skill set to start digging into Visualizer component of Postman just yet. I really do appreciate your patience with my inquiries. Have a great day and thanks again.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.