Add a description to array of images using angularjs - arrays

Question

I need to add a description to each image in the below array of images, which is found in this object:
[
{
"id": "Movie Poster Remixes",
"name": "HULK Remix",
"practices": ["Graphics", "Sketching", "Artwork", "Vector Manipulation"],
"technology": ["Inkscape", "Photoshop"],
"time": "3 Weeks",
"description": "A series of poster remixes I have one over the past couple of years. I tend to spend any free time working on some graphical artwork which tends to be printed off & framed in my house.",
"images": [
"../assets/img/details/15/1.jpg",
"../assets/img/details/15/2.jpg",
"../assets/img/details/15/3.jpg",
"../assets/img/details/15/4.jpg"
],
"header": "../assets/img/paramount-logo.svg",
"behance": "https://www.behance.net/gallery/26358303/Avengers-Hulk-Desktop-WallPaper-Design"
}
]
I can't seem to get this work. The images display in the view, but am unable to see how to add a description.
Any help would be much appreciated. TIA.
this is how I am currently accessing the object in my controller and binding certain key values to the scope.
$http.get('app/resources/v1/projects/' + $routeParams.id + '.json').success(function (details) {
$scope.details = details;
angular.forEach($scope.details, function (detail) {
$scope.header = detail.header;
$scope.intro = detail.id;
});
this is the html from the view to see how I am then exposing it
<div ng-repeat="image in detail.images">
<img class="img-responsive presentation" ng-src="{{ image.path }}" />
<table class="like-table">
<tr>
<td>
<a ng-click="likeCount = likeCount + 1">
<img class="presentation like" ng-src="{{ like }}" />
</a>
</td>
<td>Like: </td>
<td>
<strong> {{ likeCount }}</strong>
</td>
<td>
<a ng-click="shareCount = shareCount + 1">
<img class="presentation like" ng-src="{{ share }}" />
</a>
</td>
<td>Share: </td>
<td>
<strong> {{ shareCount }}</strong>
</td>
</tr>
</table>
</div>

Answer 1

UPDATE: You can't access the image paths as you did when images was just an array. It may be an issue with how you're setting up your json files and/or how you're performing the ng-repeat. Throw some console logs in your code and make sure that the variable $scope.details is as you would expect.
NOTE: I would consider keeping any data that follows this same structure, i.e. has the same keys, in one JSON file. That makes your app more efficient in that you make a single $http.get request upon page load and assign the response to $scope.details. You don't have to make a separate $http.get request for json files that have a similar structure - why not get it all from the start?
<div ng-repeat="image in detail.images">
<img class="img-responsive presentation" ng-src="{{ image.path }}" />
<table class="like-table">
...
If you are trying to add a description to each image in the images array, I would suggest changing the array images to an array of objects. So your data object would look like this (notice the change to the images array):
[
{
"id": "Movie Poster Remixes",
"name": "HULK Remix",
"practices": ["Graphics", "Sketching", "Artwork", "Vector Manipulation"],
"technology": ["Inkscape", "Photoshop"],
"time": "3 Weeks",
"description": "A series of poster remixes I have one over the past couple of years. I tend to spend any free time working on some graphical artwork which tends to be printed off & framed in my house.",
"images": [
{
"url": "../assets/img/details/15/1.jpg",
"desc": "Description 1"
},
{
"url": "../assets/img/details/15/2.jpg",
"desc": "Description 2"
},
{
"url": "../assets/img/details/15/3.jpg",
"desc": "Description 3"
},
{
"url": "../assets/img/details/15/4.jpg",
"desc": "Description 4"
}
],
"header": "../assets/img/paramount-logo.svg",
"behance": "https://www.behance.net/gallery/26358303/Avengers-Hulk-Desktop-WallPaper-Design"
}
]
Hope that helps!