LIDOR SYSTEMS

Advanced User Interface Controls and Components

Dynamically Populate Tabs from JSON in AngularJS

Created: 04 December 2015

In general, the data presented in the tabs is already included in the web page. In cases where we want to change the content for specific tab or load tabs in whole from a remote data source, we can use a JSON file as our data source. In following sections, we will show you how to do using the IntegralUI TabStrip directive for AngularJS.

Similar: TabStrip Component for Angular 2

  • {{country.name}} {{country.population}}
TabStrip directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

As above demo shows, the content of tabstrip is fully loaded from a JSON file. Tab headers show the name of the continent, while tab content shows a list of countries with their population.

Create a JSON Data Structure for Tabs

At first, we need to specify the content of our tabs, their header and content. In our example we are showing a list of continents with some countries and their population. For this purpose, the tab header will display the continent name, and as tab content we will show a list of countries with their population number. Therefore, our JSON will look like:

[

{

"id": "1",

"name": "Europe",

"continent": "Europe",

"content": [

{ "name": "France", "population": "66,109,000" },

{ "name": "Germany", "population": "80,925,000" },

{ "name": "Italy", "population": "60,788,845" }

]

},

{

"id": "2",

"name": "North America",

"continent": "North America",

"content": [

{ "name": "Canada", "population": "35,702,707" },

{ "name": "Mexico", "population": "121,005,815" },

{ "name": "USA", "population": "320,651,000" }

]

},

{

"id": "3",

"name": "South America",

"continent": "South America",

"content": [

{ "name": "Argentina", "population": "43,131,966" },

{ "name": "Brazil", "population": "204,134,000" }

]

},

{

"id": "4",

"name": "Asia",

"continent": "Asia",

"content": [

{ "name": "China", "population": "1,369,140,000" },

{ "name": "India", "population": "1,269,545,000" },

{ "name": "Japan", "population": "126,910,000" },

{ "name": "Saudi Arabia", "population": "31,521,418" },

{ "name": "South Korea", "population": "51,342,881" }

]

},

{

"id": "5",

"name": "Africa",

"continent": "Africa",

"content": [

{ "name": "Egypt", "population": "88,311,000" },

{ "name": "Nigeria", "population": "185,043,000" },

{ "name": "South Africa", "population": "54,002,000" }

]

}

]

Tabs HTML Specification

Now, we need to specify how our data from JSON file will be displayed to the end user. For tab header we are only showing a single lined text, so we only need to specify the heading property for each tab. As for the tab content, we will create a list showing the country name and its population.

<iui-tabstrip name="{{ctrlName}}" class="directive" tabs="tabs">

<iui-tab ng-repeat="tab in tabs" name="{{tab.name}}" heading="{{tab.continent}}">

<ul class="country-list">

<li ng-repeat="country in tab.content">

<span>{{country.name}}</span>

<span>{{country.population}}</span>

</li>

</ul>

</iui-tab>

</iui-tabstrip>

.directive

{

width: 450px;

height: 250px;

}

.iui-tab-content

{

padding: 10px;

}

.country-list

{

width: 95%;

}

.country-list li

{

border-bottom: thin solid gray;

margin: 10px 0;

}

.country-list span:last-child

{

float: right;

}

Load Data from JSON File into the TabStrip

Finally, we will use $http to load the data from JSON file to the tabstrip. Because tab objects are already specified in our application controller, and there are linked with the TabStrip directive properties, we only need to populate them with some data.

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITabStripService", "$http", "$timeout", function($scope, $ctrlService, $http, $timeout){

// A unique identifer for the tabstrip

$scope.ctrlName = "ctrlSample";

// An object that holds the tabs

$scope.tabs = [];

 

var initTimer = $timeout(function(){

// Load JSON file

var dataSource = $http.get('tabs-continents.json');

if (dataSource){

dataSource.success(function(data){

// Suspend the tab layout to increase performance

$ctrlService.suspendLayout($scope.ctrlName);

 

// Populate Tabs from JSON file

$ctrlService.loadData($scope.ctrlName, data);

 

// Resume and update the tab layout

$ctrlService.resumeLayout($scope.ctrlName);

});

dataSource.error(function(data){

alert("AJAX failed to Load Data");

});

}

 

$timeout.cancel(initTimer);

}, 1);

}]);

Conclusion

Populating the Angular TabStrip directive dynamically with data from a remote data source, in this case a JSON file, is simple. We only need to create the data structure for the tabs, and then link this data with the TabStrip properties. When data is loaded, the tabs will appear.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.