parsing data from JSON <p>I am making an AJAX call to a JSON file containing thumbnail images and website urls, I am then listing each out using AngularJS directive ng-repeat to list. The problem is the thumbnails and website urls are no longer populating my page. I reformatted my JSON file data into an array because I will be adding multiple arrays to my JSON file that will contain different objects to be used on other pages throughout the website. </p> <p>JSON:</p> <pre><code>{"websites":[ { "thumbnail": "thumbnail1.jpg", "website": "http://somewebsite.com" }, { "thumbnail": "thumbnail2.jpg", "website": "http://somewebsite.com" }, { "thumbnail": "thumbnail3.jpg", "website": "http://somewebsite.com" } ]} </code></pre> <p>Angular:</p> <pre><code>angular.module('myApp') .constant("dataUrl", "../json/data.json") .controller("websitesController", function($scope, $http, dataUrl){ $scope.data ={}; $http.get(dataUrl) .success(function(data){ $scope.data.projects = data; }) .error(function(error){ $scope.data.error = error; }); }); </code></pre> <p>HTML: </p> <pre><code>&lt;ul ng-controller="websitesController"&gt; &lt;li ng-repeat="item in data.projects"&gt; &lt;img ng-src="{{item.thumbnail}}" /&gt; &lt;div&gt; &lt;a ng-href="{{item.website}}" target="_blank"&gt;&lt;b&gt;Website&lt;/b&gt;&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;ul&gt; </code></pre>