AngularJS Data Loading and Assignment

This entry is part 4 of 9 in the series: AngularJS Learning Series

My goal with today’s AngularJS experiment is to load data from a JSON file, iterate through all the data, and dynamically display detail data from a clicked list item. This proved to be incredibly simple and ended up taking less than 50 lines of code, including comments!

The data loading is done using the AngularJS $http service. In this example, the data object is assigned to $scope.artists when it has been successfully loaded:

$http.get('artists.json').success(function(data) {
   $scope.artists = data;
});

Once the data is loaded I can iterate over it using the AngularJS ng-click directive. The code below loops over each record in the artists object that I loaded above. It displays the artistName property found in each artist and then assigned a function (setSelectedArtist) that will be executed when the name is clicked.

<ul>
	<li ng-repeat="artist in artists">
    	<a href ng-click='setSelectedArtist(artist)'>{{artist.artistName}}</a></li>
	</li>
</ul>

When an artist name is clicked, its artist object is passed to the setSelectedArtist function found in ArtistsController. setSelectedArtist assigns the artist to the scoped selectedArtist property. When that occurs, page references to selectedArtist are updated to reflect the new assignment:

<div class="detailimagewrapper">
    <img class="detailimage" src="{{selectedArtist.img}}" >
</div>
<p>{{selectedArtist.description}}</p>

Check out the example on Plunker. It’s well-commented and easy to modify. Try adding the artist’s genre to the detail section. Or add a new field, like recordLabel or dateFormed.

[iframe height=”400″ width=”100%” src=”http://embed.plnkr.co/R6u0QYAyKj3IvRGEtWp8″ ]

This post is barely the tip of the iceberg regarding what the AngularJS $http service offers. Check out the documentation to learn more.

Series Navigation<< AngularJS Fun With ScopesAngular Intro to Modules, Services, Factories, and Filtering >>

2 thoughts on “AngularJS Data Loading and Assignment

  1. If I am using json data from twitter, or any other website, do I still structure my http service function the same and just drop in the full url in single quotes?

    1. Hi Cresencio, This is a very simple example but it would load any json file that you placed in the get.

Comments are closed.