Angular-Flexslider with json object

Question

I'm using Angular-Flexslider on my App and I need it to display images from a json object.

Angular-flexslider includes a directive flex-slider which acts like ng-repeat so this works

<flex-slider slide="s in mySlides">
    <li>
        <img ng-src="{{s}}">
    </li>
</flex-slider>

However I need it to get images from on object not an array, and this doesn't work.

<flex-slider slide="(key, s) in mySlidesObj">
    <li>
        <img ng-src="{{s.slide}}">
    </li>
</flex-slider>

Is there anyway I can get this to work?

The Controller just has data:

app.controller('BasicSliderCtrl', function($scope) {
    $scope.mySlides = [
        'http://images.mydomain.com/General-3-320x320.jpg',
        'http://images.mydomain.com/Jared-video-320x320.jpg'
    ];

    $scope.mySlidesObj = {
      "1001" : {
        "slide" : "http://images.mydomain.com/img1.jpg"
      },      
      "1002" : {
        "slide" : "http://images.mydomain.com/ig2.jpg"
      },          
      "1003" : {
        "slide" : "http://images.mydomain.com/img3.jpg"
      },          
      "1004" : {
        "slide" : "http://images.mydomain.com/ig4.jpg"
      },

    }
});

The controller just has data. I need to tie it to a database, but for the moment I'm just trying to figure out how to get this to work with on object, other than an array. I edited my post with a snippet of code. — Jared Whipple
– Jared Whipple, Commented Mar 6, 2015 at 19:10

tasseKATT · Accepted Answer · 2015-03-07 08:55:20Z

0

Glancing at the source code it looks like iterating over objects isn't supported.

Your best option is probably to manually turn your object into an array.

For example:

$scope.mySlides = Object.keys($scope.mySlidesObj).map(function(slideObj) {
  return $scope.mySlidesObj[slideObj].slide;
});

Demo: http://plnkr.co/edit/fJ8IrPAt0cInvzD6fwdy?p=preview

answered Mar 7, 2015 at 8:55

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular-Flexslider with json object

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