Wheel Tire Family Wheel Tire Family - 2 months ago 10
AngularJS Question

AngularJS and Edmunds Media API to pull vehicle images

Situation: Using a Rails app, and $http.get in AngularJS to PULL the photos from Edmunds.com MEDIA API.

TASK TRYING TO COMPLETE: ng-repeat through the vehicle photos.

CONDITIONS: I am getting the response successfully and able to load one image, but how can I have it repeat through the photos array and do all the images.

Apologies for unclear explanation, and any help appreciated.

index.html:

<h1> Wheel Tire Family </h1>
<!-- CAR IMAGES -->
<div ng-init="carImages">

<img src="https://media.ed.edmunds-media.com/{{carImages}}">

</div>


catalog_controller.js:

$scope.photos = {};
$scope.carImages = {};

//GET the edmunds media api for the
//Make Model Year photos

$http.get("https://api.edmunds.com/api/media/v2/audi/a3/2015/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key=api_key&fmt=json")
.success(function (data) {
var photos = data;
console.log(photos);
$scope.carImages = photos.photos[0].sources[0].link.href;
console.log($scope.carImages);
});

Answer

Maybe something like this?

angular

.success(function (data) {
    $scope.carImages = data.photos;
});

html

<div ng-repeat="carImage in carImages">
    <img ng-src="https://media.ed.edmunds-media.com/{{carImage.sources[0].link.href}}">
</div>

This should loop through the images and pick the first "source" link. It is also recommended that you use ng-src instead of src.

Comments