Get Nested Json With AngularJS

Question

I have this json. How do I display the img/n.jpg in angularjs? I have multiple images under .

bb.json

{
  "bb": [
{ 
    "chapter": "1", 
    "images": ["img/1.JPG", "img/2.jpg"]
},{ 
    "chapter": "2", 
    "images": ["img/2.jpg", "img/3.jpg"]
},{ 
    "chapter": "3", 
    "images": ["img/3.jpg", "img/4.jpg"]
}
  ]
}

app.js

$http.get('js/bb.json').success(function(data){

    $scope.images = data.bb;
    $ionicSlideBoxDelegate.$getByHandle('image-viewer').update();
})

templates.html

<ion-slide-box pager-click="navSlide(index)" delegate-handle="image-viewer" show-pager='true' does-continue="true" on-slide-changed="slideHasChanged($index)">
            <ion-slide ng-repeat="slide in images.image" >
                <div style="background: url({{slide.images}}) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; width: 100%;"></div>
            </ion-slide>
        </ion-slide-box>

Where do you expect the client app to get the images from?

Robert Harvey
– Robert Harvey

2015-07-15 03:18:23 +00:00
Commented Jul 15, 2015 at 3:18 — Robert Harvey
– Robert Harvey, Commented Jul 15, 2015 at 3:18

jakeforaker · Accepted Answer · 2015-07-15 03:42:25Z

You should iterate through the images array, and push each image to a newly created array, which is bound to your $scope.

For ex:

angular.module('fiddle', [])

.controller('MainCtrl', function ($scope) {

    var json = {
        "bb": [
            {
                "chapter": "1",
                "images": ["img/1.JPG", "img/2.jpg"]
            }, {
                "chapter": "2",
                "images": ["img/2.jpg", "img/3.jpg"]
            }, {
                "chapter": "3",
                "images": ["img/3.jpg", "img/4.jpg"]
            }
        ]
    };

    $scope.imagesArray = [];

    json.bb.forEach(function (item) {
        item.images.forEach(function (image) {
            $scope.imagesArray.push({
              src: image
            });
        });
    })

});

And in your template (obviously you would not use a <p>):

    <p ng-repeat="image in imagesArray">{{ image.src }}</p>

Plunk: http://plnkr.co/edit/Nf1wNF6M8RB2TvgkpgXe?p=preview

Manish Parakhiya · Accepted Answer · 2015-07-15 03:43:02Z

0

you should use ng-style directive to apply background image.

<div ng-style="{'background': 'url({{slide.images}}) no-repeat center center fixed', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover', 'height': '100%', 'width': '100%'}"></div>

edited Jul 15, 2015 at 3:43

answered Jul 15, 2015 at 3:35

Manish Parakhiya

3,8083 gold badges24 silver badges26 bronze badges

Collectives™ on Stack Overflow

Get Nested Json With AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related