Live Demo - View Complex Datasets one record at a time

In this demo we start with an initial API call on page load GET: https://api.hostmy.io/v2/tables/T-459a73a9-9697-46f9-a589-a6ea18c9bb54?include=symbol using a header X-API-KEY: K-4f772b34-0a1e-4da9-94dc-9637d0dbbf5b

This call returns an array of 'symbol' values used in the client app to populate the Symbol dropdown menu. This avoids the need for the application to have a hard-coded set of values it needs to be able to query the table data by one of the attribute values.

The app then loads the initial default record by setting 'index=0' then calling GET https://api.hostmy.io/v2/tables/T-459a73a9-9697-46f9-a589-a6ea18c9bb54?max-page-size=1&page-number={index} using a header X-API-KEY: K-4f772b34-0a1e-4da9-94dc-9637d0dbbf5b

This call returns 1 record from the table at index 0

The app then uses the returned values from this record to render the UI view.

The app provides 3 user controls to navigate to different records of the table:
  'Read Previous Element' button, when clicked will subtract 1 from 'index' and call GET https://api.hostmy.io/v2/tables/T-459a73a9-9697-46f9-a589-a6ea18c9bb54?max-page-size=1&page-number={index}
  'Read Next Element' button, when clicked will add 1 to 'index' and call GET https://api.hostmy.io/v2/tables/T-459a73a9-9697-46f9-a589-a6ea18c9bb54?max-page-size=1&page-number={index}
  'Select by Symbol' dropdown, when selected will set the value of 'symbol' to that selected and call GET https://api.hostmy.io/v2/tables/T-459a73a9-9697-46f9-a589-a6ea18c9bb54?condition-field=symbol&condition-operator=EQ&condition-value={symbol}