How to use Select and Transform API to transform your incoming API response

In the article, we have outlined a scenario where a user needs to transform an incoming API response to a specific JSON format, using an example of modifying a LinkedIn API response.

The explanation includes a step-by-step guide on how to implement the JSON transformation using specific attributes in the JSON payload

To start, This is my API response from LinkedIn.

The API response can be checked here.

{
    "value": {
        "uploadUrlExpiresAt": 1712060505125,
        "uploadUrl": "https://www.linkedin.com/dms-uploads/sp/D4D10AQE9uu-zs6JUEg/uploaded-image/0?ca=vector_ads&cn=uploads&sync=0&v=beta&ut=3GaHCeD2OBobc1",
        "image": "urn:li:image:D4D10AQE9uu-zs6JUEg"
    }
}

Now my requirement is to get the JSON response in the following format. Notice the digitalmediaAsset key is newly introduced and the value of the digitalmediaAsset key is the image key value splitted by a colon and the last value after the last colon is picked up.

{
    "value": {
        "uploadUrlExpiresAt": 1712060505125,
        "uploadUrl": "https://www.linkedin.com/dms-uploads/sp/D4D10AQE9uu-zs6JUEg/uploaded-image/0?ca=vector_ads&cn=uploads&sync=0&v=beta&ut=3GaHCeD2OBobc1",
        "image": "urn:li:image:D4D10AQE9uu-zs6JUEg",
        "digitalmediaAsset": "D4D10AQE9uu-zs6JUEg"
    }
}

The JSON Difference of the original JSON and the transformed JSON can be checked clearly through the image below.

The API that we use internally inside Pabbly Connect is the JSON Transformer API available on Github. You can learn more patterns of select and transform on the page link below.
https://selecttransform.github.io/site/

The playground is available at:
https://selecttransform.github.io/playground/

My select data transformation playground page looks like this.

I am pasting the whole left side content from the playground here.

It takes the input JSON in the data variable. In the template variable, I implement my modifications to the input JSON in the data variable.

On the right side, I can see the final output of the JSON transformation.

var data = {
    "value": {
        "uploadUrlExpiresAt": 1712060505125,
        "uploadUrl": "https://www.linkedin.com/dms-uploads/sp/D4D10AQE9uu-zs6JUEg/uploaded-image/0?ca=vector_ads&cn=uploads&sync=0&v=beta&ut=3GaHCeD2OBobc1",
        "image": "urn:li:image:D4D10AQE9uu-zs6JUEg"
    }
};

var template = {"value": "{{  {...this.value, 'digitalmediaAsset':this.value.image.split(':')[3]} }}"}

---

Once you are able to transform your incoming JSON. All you need to do is to implement the same on your Pabbly Connect Custom App Action.

To implement the incoming JSON transformation, in the endpoint URL of any action step, you will have to add the "pc_json_parser_type" and "pc_json_parser_template" query strings. The input data variable is not required as it will be automatically fetched from the response of the endpoint URL of any action.

?pc_json_parser_type=transform&pc_json_parser_template={"value":  "{{{ {...this.value, 'digitalmediaAsset':this.value.image.split(':')[3]} }}}" }

If you notice the pc_json_parser_template query string value, it is exactly the same as the value of the template variable above.

Let me show the action implementation to you and also show you how the output JSON changes inside Pabbly Connect due to the implementation of select and transformation.

This is the Pabbly Connect developers platform screenshot of the setup new action step without using any JSON transformation. I already shared the screenshot from Postman on the top of this tutorial.

The endpoint URL is:

https://api.linkedin.com/rest/images?action=initializeUpload

This is the result that you get on Pabbly Connect when you run this action with the plain vanilla endpoint URL without using any "pc_json_parser_type" and "pc_json_parser_template" query strings.

However, when you run this very same action with the "pc_json_parser_type" and "pc_json_parser_template" query strings added. The final output changes.

The screenshot below shows the addition of "pc_json_parser_type" and "pc_json_parser_template" query strings.

The full endpoint URL after adding the query string becomes:

https://api.linkedin.com/rest/images?action=initializeUpload&pc_json_parser_type=transform&pc_json_parser_template={"value":  "{{{ {...this.value, 'digitalmediaAsset':this.value.image.split(':')[3]} }}}" }

NOTE: Any presence of
"{{ needs to be changed to "{{{
and any presence of
}}" needs to be changed to }}}"

This is the result that you get on Pabbly Connect when you run this action with the full endpoint URL while using the "pc_json_parser_type" and "pc_json_parser_template" query strings.

Note: We setup the endpoint URL in our developers platform so the user does not need to do anything on his end. For the user the experience is just like firing any other action step but we manually added some useful data that we wanted to simplify and add to the output JSON response.

This is just a simple use-case shown to show you the power of JSON Select and Transform but the possibilities are limitless as you can modify any incoming JSON as per your use-case.

---

Further Reading: You can check more JSON Select and Transformation use-cases through the link below.
https://forum.pabbly.com/threads/filtering-and-transforming-json-in-pabbly-connect.5116/