Using angular I'm making an ajax jsonp request to retrieve channels from the twitch.tv api. A few of the channels do not have logo images, so I would like to put a placeholder image for channels with null logo object. I created an object '$scope.imgs which has two properties current: data.logo which are the logo images from twitch.tv api, and replaceData which is the image url to the replacement image i'd like to use as an image placeholder. I created an if statement to test weather data.logo is null and if it is replace the src attribute string with the replacement image string, but i'm using ng-src, so I wanted to know how i can target ng-src and if I am taking the right approach to replacing the channnels with a null image object values?
there is more code but this is the portion I'm having difficulty with..
$http.jsonp(url + streamers[i] + callback).success(function(data) {
$scope.imgs = {
current: data.logo,
replacement: "http://www.zwani.com/graphics/hello_funny/images/56467.jpg"
}
if (data.logo === null) {
$scope.imgs.current = $scope.imgs.replacement;
var replaceData = $scope.imgs.current;
console.log($scope.imgs.current);
document.getElementsByTagName('img').src = replaceData;
}
self.info.push(data);
})
You are over-complicating it . All you need is to update the property with your url string.
Angular will take care of displaying it for you
$http.jsonp(url + streamers[i] + callback).success(function(data) {
var placeholder ="http://www.zwani.com/graphics/hello_funny/images/56467.jpg";
if(!data.logo){
data.logo = placeholder ;
}
self.info.push(data);
});