Get response data and alter the the information to show

In this article, you will learn -

  1. How to get response from an API
  2. How to parse the response information and alter the data to show a specific information the user needs in a better readable format

1. Get the response data from API#

In the preceding article you have learnt how to pass input parameters in a API. In this article, we will show how to retrieve the data from response and parse the data in the way that you need to display.

To retrieve the API response and display it to the user, follow these steps -

  1. When configuring a flow, add a Prompt/Message node after the actions node where you want to retrieve the response.
  2. Select the variable where you have stored the API response.
  3. Using the dot notation, access the value of API response.

When a user inputs values through the conversation, the bot displays the ID.

Learn more about the API node here.

2. Display response information using Function#

With the preceding procedure, you get the response object. You can use Function to alter the structure and format of the raw data and show it in a more meaningful format.

Use the API section to invoke APIs. However, to parse and manipulate the API response, you need to use the Functions tab.

To parse and alter the response data, follow these steps -

  1. Open Studio > Build > Functions.
  2. Click +Add new function.

Code Snippet: Example- transformationFN

let { apiResponse } = ymLib.args; // retrieve API response
let weather_condition, actions = [],result=[];
let response = JSON.parse(apiResponse.body);
response = response.weather; // fetch weather data from API response
response.forEach((element, index) => {
actions = [];
weather_condition = `<strong>${element.main}</strong>`;
});
console.log(weather_condition);
return weather_condition;
  1. You will see the JSON response in the API Response pane on the right. Fetch and parse the API response as JSON using the following code snippet.

let apiResponse = ymLib.args.apiResponse; // fetch API response
let body;
if(apiResponse && apiResponse.body)
{
body = JSON.parse(apiResponse.body) // parse API response and store it in body variable
}
  1. In the API response, it starts with an array followed by JSON objects. To access response from the array and store it in the postOffice variable, add the following lines of code in the Transformation function.
let postOffice = body[0].PostOffice; // Access and store PostOffice field from the API response
console.log(postOffice);
let postofficeName = [];

In the transformation function, you can access the API response in ymLib.args. You can write your own logic in javascript to fetch only the fields you wish to have in the response of API.

  1. After getting access to JSON object, use a for loop to iterate over all objects and parse Name key from the objects, which will be pushed to the postofficeName array.
for(let i=0;i< postOffice.length; i++)
{
postofficeName.push(postOffice[i].Name) // fetch PostOffice Name and store in postOfficeName array
}
return resolve(postofficeName);
  1. In the API node, select the transformation function that was created using the Parse API response drop-down.