How to Load External Data Into a Fiddle

If you attempt to load data from an external domain into a Fiddle you’re likely going to receive an XMLHttpRequest error that looks something like “Origin is not allowed by Access-Control-Allow-Origin”. You can use JSFiddle’s echo requests if you just want to simulate returning data, but sometimes you want to demonstrate an actual retrieval.

Legitimate security concerns regarding cross-site HTTP requests are the reason why you can’t simply read in any old file. However, using appropriate page headers makes accessing files from other domains possible. So, if we can set page headers in a file that returns our data, it should be accessible, right? Right!

This can’t be done using a JSON file, but it can be done in a PHP file that is setup to output JSON. The PHP code would look something like this:

<?php
// Allow access from anywhere. Can be domains or * (any)
header('Access-Control-Allow-Origin: http://fiddle.jshell.net');

// Allow these methods of data retrieval
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');

// Allow these header types
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

// Create our data object in that crazy unique PHP way
$arr = array(array("id" => 1, "character" => "Minstrel", "line" => "And Saint Attila raised the hand grenade up on high, saying, 'O Lord, bless this thy hand grenade, that with it thou mayst blow thine enemies to tiny bits, in thy mercy.' And the Lord did grin."));

// Return as JSON
echo json_encode($arr);
?>

Note that you don’t have to use PHP. You can use just about any server side scripting language; ASP, .NET, ColdFusion, Ruby, etc., as long as you set the headers properly.

Check out an example:
[iajsfiddle fiddle=”bNyqY” height=”200px” width=”100%” show=”result,html,js,css” skin=”default”]

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.