retrieve image url from object values - angular js

Question

Very noob here to Angular JS.

I'm working on a project and I have a solution to this, but I was wondering if theres a better approach thats a bit more "angular-esque" if you will.

Essentially for each videoid, it performs an ajax request locating that videoid's image and places that into the src attribute.

In pure javascript this would be no problem, and I've figured out one solution but it sort of deviates away from the angular approach.

I was wondering if it's possible to do something sort of what I have here. (obviously this doesnt work yet)

Markup

    <ul class="storysContainer">
    <li video-on-click ng-repeat="video in videos" id="video{{$index}}" >
          <img ng-src="{{getVideoThumb()}}">

    </li>
   </ul>

JS

 $scope.videos = [
      {
       'videoid': '1122345'
      },
      {
       'videoid': '1134567'
      },
      {
       'videoid': '2234456'
      }
     ];


  $scope.getVideoThumb = function() {
   $.get("http://blahblah.com/id=" + url,function(data){
     var urlMain = data.channel.item["media-group"]["media-thumbnail"]["@attributes"].url;
     array.push(urlMain);
    });
  return array;
  }

Thanks

edit:

This is the solution that i came up with..not sure if it's necessarily the best angular-esque appraoch, but it works.

angular.forEach($scope.videos, function(data) {
    var dataid = "http://blablah.com?id=" + data.videoid;
    console.log(dataid);
     $.get(dataid, function(img){
     var urlMain = img.channel.item["media-group"]["media-thumbnail"]["@attributes"].url;
     $('#thumb' + data.videoid).attr('src', urlMain);
     //array.push(urlMain);
  });
});

prawn · Accepted Answer · 2014-11-06 16:34:51Z

I would declare the URL for each object within the videos object array. That way you can just bind the value in your presentation layer.

So maybe something like

$scope.videos = [
  {
   'videoid': '1122345'
  },
  {
   'videoid': '1134567'
  },
  {
   'videoid': '2234456'
  }
 ];

//modified this a little. I take it this call accepts the videoID as a parameter 
//and returns the url for a single video? 
//I wasn't sure what the 'array' variable you were using was.
//I am also using angular $http service to make this ajax call

 $scope.getVideoThumb = function(videoID) {
   $http.get("http://blahblah.com/id=" + videoID).success(function(data){
     var urlMain = data.channel.item["media-group"]["media-thumbnail"]["@attributes"].url;
     return urlMain;
    });
  }

//iterate through each object and assign it a 'URL' property to the result of 'getVideoThumb(videoID)'
for(var i = 0; i < $scope.videos.length; i++){
     $scope.videos[i].URL = $scope.getVideoThumb($scope.videos[i].videoid);
}

and now in our presentation layer we can just bind the value of URL to the ng-src

<li video-on-click ng-repeat="video in videos" id="video{{$index}}" >
      <img ng-src="{{video.URL}}">

</li>

Collectives™ on Stack Overflow

retrieve image url from object values - angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related