Populate a datagrid with json data using types

In Load JSON data into a DataGrid - #4 by dawie.botes , Dawie shows us how to populate a Datagrid using javascript.

In this post, you will learn how to populate a Datagrid with JSON data in a few steps using Types and field Mapping.

Scenario:
We will call the RandomUser API and we will populate the datagrid with the response data.

Steps

  1. Open a new application and create a new webservice connector , name it as RandomUsersAPI_GetUsers with the following connection

{“URL”:“https://randomuser.me/api",“Auth”:“Anonymous”,"Timeout”:90}
image

  1. Create the following GetUsers operation

  2. Import a type and in the editor paste the json data texts attached.

[ { "gender": "female", "name": { "title": "Mrs", "first": "Jennifer", "last": "Graves" }, "location": { "street": { "number": 2575, "name": "Grange Road" }, "city": "Clonmel", "state": "Kilkenny", "country": "Ireland", "postcode": 17282, "coordinates": { "latitude": "24.1624", "longitude": "21.0585" }, "timezone": { "offset": "-9:00", "description": "Alaska" } }, "email": "jennifer.graves@example.com", "login": { "uuid": "75a14346-130f-4e94-8f08-2d6acaf95ec6", "username": "orangecat867", "password": "656565", "salt": "ob73Kta8", "md5": "a7c1f355a48ac6b5f73fb88cecb6d3a2", "sha1": "30e23a991cc3689e67e3f41c05b706e2cc7ca0bc", "sha256": "4cad6e9e38b851f41636de5a2a57731af42c5aa43d4b92e6892d9dbc416db677" }, "dob": { "date": "1967-02-11T07:08:18", "age": 55 }, "registered": { "date": "2013-12-21T12:17:40", "age": 9 }, "phone": "051-953-9838", "cell": "081-431-3568", "id": { "name": "PPS", "value": "1493225T" }, "picture": { "large": "https://randomuser.me/api/portraits/women/76.jpg", "medium": "https://randomuser.me/api/portraits/med/women/76.jpg", "thumbnail": "https://randomuser.me/api/portraits/thumb/women/76.jpg" }, "nat": "IE" } ]

image

  1. Drag and drop a Datagrid on the StartPage designer.
    From the datagrid properties window, Click on Columns browse button. Click ADD column. Create the following columns : First name, Last name, gender, country

  2. Drag and drop the operation GetUsers created above on the StartPage.Load

  3. Drag and Drop a List and set its item type as Type and set its value to

= ~.RandomUsersAPI_GetUsers_GetUsers.results

  1. Drag and drop a SetValue action and follow the exact steps as shown

StadiumDesigner_8zmkg2dYqU

  1. Click on preview

Sample
DataGridWebService.sapz (14.7 KB)