Currently using AngularJS version 1.5.11
I am attempting to present images sourced from a JSON array.
Is my method correct:
$scope.mainImage = $scope.template.images[0].name;images.
This is my Controller in templates.js file:
.controller("TemplatesDetailsCtrl", ["$scope", "$routeParams", "$http", "$filter", function($scope, $routeParams, $http, $filter ){
var templateId = $routeParams.templateID;
$http.get("json/templates.json").success(function(data){
$scope.template = $filter("filter")(data, function(d){
return d.id == templateId;
})[0];
$scope.mainImage = $scope.template.images[0].name; //THIS IS LINE 30
});
}]);
The objective is to show the first image from the array. Here is the relevant HTML code:
<img class="img-full" src="img/{{mainImage}}">
I have attempted multiple times without success and continue to encounter this error: https://i.sstatic.net/mdVVf.jpg
Your assistance would be greatly appreciated.