Displaying a list with REST API
This example builds a navigation list of locations, BIRT Aviatio requests values from a data set in the flight delay.data file. The following is a general overview of that process:
*Search for the flight delay.data file by building a URI using the REST API.
*Append the authentication identifier to the end of the URI and send it to an iHub server.
*Extract the file id from the file search request.
*Use the file id to make a second REST API request that retrieves a data set of locations from the flight delay.data file.
*Parse the JSON response from the iHub server into an array for each region.
*Build the state name navigation of the application using these names.
The index.html file displays region names for a user to select using the following HTML:
<div id="startNav">
<div id="startWest" ng-click="button_clicked || showState('West', 'start')"></div>
<div id="startMidwest" ng-click="button_clicked || showState('Midwest', 'start')"></div>
<div id="startSouth" ng-click="button_clicked || showState('South', 'start')"></div>
<div id="startNortheast" ng-click="button_clicked || showState('Northeast', 'start')"></div>
</div>
When the user selects a region, the showState function displays the states in the selected region using the following JavaScript code from controller.js:
$scope.showState = function(region, page) {
$scope.statePopOverClass = "hide";
if ($scope.selectedRegion != region) {
$scope.highlightRegion(region, page);
$scope.selectedRegion = region;
$scope.statePopOverClass = region + "Class";
} else {
$scope.highlightRegion($scope.currentRegion, page);
$scope.selectedRegion = "";
}
}
When the user selects a state, the selectState function runs. This function populates the previous and next navigation buttons with the correct state to load, initializes the JSAPI BIRT viewer if it is not already initialized, runs the reportNeedsReRun function to prepare for loading report visualizations.
See the source code for the complete example.