Links

Add JSON data

Brief

In this guide, let’s discuss broadly about Javascript Object Notation (JSON). You may have heard this before and usually is pronounced as “Jason”. Essentially, a lot of the web development world uses what’s called JSON in the context of working with data.
For example,
  • Storing data
  • Transfer data from server to client, client to server (or) server to server.
You can imagine a JSON file to look like follows:
example.json
{
"restaurant" : "Sha Ghouse",
"dish" : "Biryani",
"location" : “Hyderabad”
}
The data is enclosed in a Object {} and detailed in key-value pairs.

Prerequisites

Guide to build Freshworks app on Uiflow

Objects

In programming world, Objects are known as a data structure to organise information. Infact the JSON we discussed earlier root from Javascript Objects. This is the same reason the expansion is called, Javascript Object Notation.

Difference between JSON vs Object

JSON was developed to be used by any programming language while JS Objects can only worked within Javascript Runtime. Interms of syntax, both JSON and JS Object share similar syntax but the keys in JS Objects are not Strings in qutoes and values can hold function expressions.

Create an Object

Let’s discuss how we can create Objects in Uiflow Studio.
In order to create a static object in Uiflow, drag and drop Create Object logic component in the flow panel. In this section let’s create a sample object and log the static information in the object.
  1. 1.
    Select the State tab of inspector panel when Create Object component is in selection.
  2. 2.
    Add two nodes of both type string
    1. 1.
      Name
    2. 2.
      Id
  3. 3.
    Fill in the data in Name and ID fields of the Actions tab as MJ Works and 7369. This completes us creating an Object with some data in it.
  4. 4.
    In order to test the object that we just created, let’s simply log the information using the Console component (Learn more about live mirroring). Input the call connector to log of Console and invoke the app. (The call connector stems from onAppActivated and onAppInitialized events).
You should see the Console component logging the object information. The preview is available as shown in the screenshot.

Mutating Object with Dynamic Values

We statically input values to the Object that we created. In this section,let’s look into another example, where one of the properties in the object we created can be mutated with a value that is dynamically obtained at the runtime.
We simply have to bring a input connector into “name” node of Create Object component. Assume that this input connectors gets a value from a API call. During the execution the static value “MJ Works” will by dynamically overwritten by “American Bulldog” value at “name” input node.
The result is object that contains dynamic value in name property and id is static.

Pick a Nested Value in a Object

At times you will need to work with nested objects. You might need a value that you need to flow it to next component, however the challenge is that value you need is nested.
Get Value at Path component allows you to access the right key in nested object by letting you use dot operator. The following table will describe the flow:
Create Object
Get Value at Path
Console
State
Actions:
Actions
No changes to the inspector panel.
You define the object structure as follows:
{
name:{
"first_name":"MJ",
"last_name":"Works"
},
id: 7369
}
You select the first_name by using dot operator in name.first_name
Notice the preview only specifies MJ as we only picked it.

Pick multiple values from an Object

It’s possible to pick multiple values in an object by using “Get Values” component.
Use a input connector to pass in object to the Get Values component and add nodes in the state tab of inspector panel and list keys you want to extract values out.
Notice the value preview in the Console component.

Shaping the API Response

When consuming API Responses they are not always right away useful to your application. As developers, it’s our job to modify the data that fits well with our usecase. For example, if you want to build a application that lists Dog breeds by origin then the following are most important information to your application:
  1. 1.
    The name of the dog beed
  2. 2.
    The origin
  3. 3.
    An image of the dog
  4. 4.
    Also it’s weight
However, the API you will consume gives you more information than what needs to be for your application.
Let’s say, this is the example response from the API
[
{
"weight": {
"imperial": "6 - 13",
"metric": "3 - 6"
},
"height": {
"imperial": "9 - 11.5",
"metric": "23 - 29"
},
"id": 1,
"name": "Affenpinscher",
"bred_for": "Small rodent hunting, lapdog",
"breed_group": "Toy",
"life_span": "10 - 12 years",
"temperament": "Stubborn, Curious, Playful, Adventurous, Active, Fun-loving",
"origin": "Germany, France",
"reference_image_id": "BJa4kxc4X",
"image": {
"id": "BJa4kxc4X",
"width": 1600,
"height": 1199,
"url": "https://cdn2.thedogapi.com/images/BJa4kxc4X.jpg"
}
},
{
"weight": {
"imperial": "50 - 60",
"metric": "23 - 27"
},
"height": {
"imperial": "25 - 27",
"metric": "64 - 69"
},
"id": 2,
"name": "Afghan Hound",
"country_code": "AG",
"bred_for": "Coursing and hunting",
"breed_group": "Hound",
"life_span": "10 - 13 years",
"temperament": "Aloof, Clownish, Dignified, Independent, Happy",
"origin": "Afghanistan, Iran, Pakistan",
"reference_image_id": "hMyT4CDXR",
"image": {
"id": "hMyT4CDXR",
"width": 606,
"height": 380,
"url": "https://cdn2.thedogapi.com/images/hMyT4CDXR.jpg"
}
},
{
"weight": {
"imperial": "44 - 66",
"metric": "20 - 30"
},
"height": {
"imperial": "30",
"metric": "76"
},
"id": 3,
"name": "African Hunting Dog",
"bred_for": "A wild pack animal",
"life_span": "11 years",
"temperament": "Wild, Hardworking, Dutiful",
"origin": "",
"reference_image_id": "rkiByec47",
"image": {
"id": "rkiByec47",
"width": 500,
"height": 335,
"url": "https://cdn2.thedogapi.com/images/rkiByec47.jpg"
}
},
{
"weight": {
"imperial": "40 - 65",
"metric": "18 - 29"
},
"height": {
"imperial": "21 - 23",
"metric": "53 - 58"
},
"id": 4,
"name": "Airedale Terrier",
"bred_for": "Badger, otter hunting",
"breed_group": "Terrier",
"life_span": "10 - 13 years",
"temperament": "Outgoing, Friendly, Alert, Confident, Intelligent, Courageous",
"origin": "United Kingdom, England",
"reference_image_id": "1-7cgoZSh",
"image": {
"id": "1-7cgoZSh",
"width": 645,
"height": 430,
"url": "https://cdn2.thedogapi.com/images/1-7cgoZSh.jpg"
}
},
{
"weight": {
"imperial": "90 - 120",
"metric": "41 - 54"
},
"height": {
"imperial": "28 - 34",
"metric": "71 - 86"
},
"id": 5,
"name": "Akbash Dog",
"bred_for": "Sheep guarding",
"breed_group": "Working",
"life_span": "10 - 12 years",
"temperament": "Loyal, Independent, Intelligent, Brave",
"origin": "",
"reference_image_id": "26pHT3Qk7",
"image": {
"id": "26pHT3Qk7",
"width": 600,
"height": 471,
"url": "https://cdn2.thedogapi.com/images/26pHT3Qk7.jpg"
}
},
{
"weight": {
"imperial": "65 - 115",
"metric": "29 - 52"
},
"height": {
"imperial": "24 - 28",
"metric": "61 - 71"
},
"id": 6,
"name": "Akita",
"bred_for": "Hunting bears",
"breed_group": "Working",
"life_span": "10 - 14 years",
"temperament": "Docile, Alert, Responsive, Dignified, Composed, Friendly, Receptive, Faithful, Courageous",
"reference_image_id": "BFRYBufpm",
"image": {
"id": "BFRYBufpm",
"width": 1280,
"height": 853,
"url": "https://cdn2.thedogapi.com/images/BFRYBufpm.jpg"
}
},
{
"weight": {
"imperial": "55 - 90",
"metric": "25 - 41"
},
"height": {
"imperial": "18 - 24",
"metric": "46 - 61"
},
"id": 7,
"name": "Alapaha Blue Blood Bulldog",
"description": "The Alapaha Blue Blood Bulldog is a well-developed, exaggerated bulldog with a broad head and natural drop ears. The prominent muzzle is covered by loose upper lips. The prominent eyes are set well apart. The Alapaha's coat is relatively short and fairly stiff. Preferred colors are blue merle, brown merle, or red merle all trimmed in white or chocolate and white. Also preferred are the glass eyes (blue) or marble eyes (brown and blue mixed in a single eye). The ears and tail are never trimmed or docked. The body is sturdy and very muscular. The well-muscled hips are narrower than the chest. The straight back is as long as the dog is high at the shoulders. The dewclaws are never removed and the feet are cat-like.",
"bred_for": "Guarding",
"breed_group": "Mixed",
"life_span": "12 - 13 years",
"history": "",
"temperament": "Loving, Protective, Trainable, Dutiful, Responsible",
"reference_image_id": "33mJ-V3RX",
"image": {
"id": "33mJ-V3RX",
"width": 1828,
"height": 2065,
"url": "https://cdn2.thedogapi.com/images/33mJ-V3RX.jpg"
}
},
{
"weight": {
"imperial": "38 - 50",
"metric": "17 - 23"
},
"height": {
"imperial": "23 - 26",
"metric": "58 - 66"
},
"id": 8,
"name": "Alaskan Husky",
"bred_for": "Sled pulling",
"breed_group": "Mixed",
"life_span": "10 - 13 years",
"temperament": "Friendly, Energetic, Loyal, Gentle, Confident",
"reference_image_id": "-HgpNnGXl",
"image": {
"id": "-HgpNnGXl",
"width": 500,
"height": 500,
"url": "https://cdn2.thedogapi.com/images/-HgpNnGXl.jpg"
}
},
{
"weight": {
"imperial": "65 - 100",
"metric": "29 - 45"
},
"height": {
"imperial": "23 - 25",
"metric": "58 - 64"
},
"id": 9,
"name": "Alaskan Malamute",
"bred_for": "Hauling heavy freight, Sled pulling",
"breed_group": "Working",
"life_span": "12 - 15 years",
"temperament": "Friendly, Affectionate, Devoted, Loyal, Dignified, Playful",
"reference_image_id": "dW5UucTIW",
"image": {
"id": "dW5UucTIW",
"width": 1023,
"height": 769,
"url": "https://cdn2.thedogapi.com/images/dW5UucTIW.jpg"
}
},
{
"weight": {
"imperial": "60 - 120",
"metric": "27 - 54"
},
"height": {
"imperial": "22 - 27",
"metric": "56 - 69"
},
"id": 10,
"name": "American Bulldog",
"breed_group": "Working",
"life_span": "10 - 12 years",
"temperament": "Friendly, Assertive, Energetic, Loyal, Gentle, Confident, Dominant",
"reference_image_id": "pk1AAdloG",
"image": {
"id": "pk1AAdloG",
"width": 1669,
"height": 1377,
"url": "https://cdn2.thedogapi.com/images/pk1AAdloG.jpg"
}
}
]
Pay attention to following details in the response:
  1. 1.
    The response is an array which encloses 10 objects — [{..},{..},{..},..]
  2. 2.
    Each of the objects has many key value pairs where few keys such as “image” itself has another object as it’s value.
  3. 3.
    The information we need are just four properties — name, origin, weight
To build an app that lists Dog breeds by origin using the above API response you will need to modify data as follows:
  1. 1.
    Take each object in the array as you plan to iterate through all the 10 items of response.
  2. 2.
    In each object select each of the properties with their values and pass them to UI.
  3. 3.
    Now it’s left to UI to best render the data in terms of UX we want to offer to the user.
This modification requires us as developers to know our tools (Uiflow components) better in order to be able to achieve what we envision.

Work with API response

We will try to modify the API response and yet will focus on different UIflow components that come into picture. In this example we will populate list of dog names in the contact sidebar in Freshdesk. However, let’s focus on the data manipulation parts of the flow we built.

List information from API Response

When app is initialized or activated the control of flow makes an API call and gets the response from Dog Search API.
JSON Response Container
For Each
Get Values
Sequence
Text (constructor)
The API response has returns you an Array of Objects.
Read more about how to make API call and TheDogAPI used in this example.
Pick up each object one at a time and pass object data to next component.
Read more about For Each
State Tab of Inspector Panel add a node.
It calls to components in the follow panel one after another.
Refer to Sequence
Text component is a UI component. It is responsible to display text in the app’s UI.
[
{
"id": 4,
"name": "Airedale Terrier",
"bred_for": "Badger, otter hunting",
"breed_group": "Terrier",
"life_span": "10 - 13 years",
},
…9 more such objects.
]
{
"id": 4,
"name": "Airedale Terrier",
"bred_for": "Badger, otter hunting",
"breed_group": "Terrier",
"life_span": "10 - 13 years",
}
The output node will select the “name” property and pass it over to text constructor.
Note that this happens iteratively for each object.
call 1 would create a copy of Text in UI
Call 2 sets the value input (name) from Get Values component and passes to Text component.
In the contact side bar

Takeaways

JSON over the web is the primary way of communicating data between two web applications over the internet. I hope this guide has helped you learn about JSON and how you can approach solving your problems using Uiflow studio.
  • You now know how to create a Object in Uiflow Studio using the flow panel.
  • You can mutate an Object with Dynamic data inputs.
  • You can pick nested or multiple values from an Object.
  • You can shape the API response in ways that’s relavant to the user on the interface.
We look forward to see what you can build.