parsing data from JSON - json

Question

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.
JSON:
{"websites":[
{
"thumbnail": "thumbnail1.jpg",
"website": "http://somewebsite.com"
},
{
"thumbnail": "thumbnail2.jpg",
"website": "http://somewebsite.com"
},
{
"thumbnail": "thumbnail3.jpg",
"website": "http://somewebsite.com"
}
]}
Angular:
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;
});
});
HTML:
<ul ng-controller="websitesController">
<li ng-repeat="item in data.projects">
<img ng-src="{{item.thumbnail}}" />
<div>
<a ng-href="{{item.website}}" target="_blank"><b>Website</b></a>
</div>
</li>
<ul>

Answer 1

Your JSON data has a key called websites that is storing an array of websites. You are adding that object with the websites key as your $scope.data.projects. To access the array of websites, you need to look into that object, i.e., you should assign $scope.data.projects to data.websites. Change your success handler as follows:
.success(function(data){
$scope.data.projects = data.websites;
})
EDIT: data examples --
Your response data looks like this:
{"websites":[
{
"thumbnail": "thumbnail1.jpg",
"website": "http://somewebsite.com"
},
{
"thumbnail": "thumbnail2.jpg",
"website": "http://somewebsite.com"
},
{
"thumbnail": "thumbnail3.jpg",
"website": "http://somewebsite.com"
}
]}
But, you want it to look like this (parsed too) in order to use it in your ng-repeat:
[
{
"thumbnail": "thumbnail1.jpg",
"website": "http://somewebsite.com"
},
{
"thumbnail": "thumbnail2.jpg",
"website": "http://somewebsite.com"
},
{
"thumbnail": "thumbnail3.jpg",
"website": "http://somewebsite.com"
}
]

Answer 2

It should be $scope.data.projects=data.websites;