Search code examples
javascriptangularjsjsonp

Substituting place holder image for jsonp image object with a value of null


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);

                    }) 

Solution

  • 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);    
    });