How to pull image from json to html in angular js without using rest?

Question

I want to pull image from JSON database to show it in image slider. JSON is:-

{ "items" : [ { "img": "img/product1.JPG", "alt" : "Image 1" }, { "img": "img/product2.JPG", "alt" : "Image 2" }, { "img": "img/product3.JPG", "alt" : "Image 3" }, { "img": "img/product4.JPG", "alt" : "Image 4" }, { "img": "img/product5.JPG", "alt" : "Image 5" }, { "img": "img/product6.JPG", "alt" : "Image 6" } ] }

html:-

<div id="image_slider" class="img_slider">
     <img src={{items}} />
</div>

css:- #image_slider .item{ padding: 30px 0px; background: #a1def8; display: block; margin: 5px; color: #FFF; border-radius: 3px; text-align: center; }

controller:- This is jquery code.I want to convert that code in AngularJs.I am new to angular.So can anyone help me in this?

//$scope.document.ready(function($scope) {
 app.directive('image_slide', function($scope) {

     $scope.document.ready(function($scope) {
  ("#image_slider").img_slider({
    jsonPath : 'data/imageSlider.json',
    jsonSuccess : customDataSuccess
  });

  function customDataSuccess(data){
    var content = "";
    for(var i in data["items"]){

       var imgs = data["items"][i].imgs;
       //var alt = data["items"][i].alt;

       content += "<img src=" + "" +imgs+ "/>";
      /* <img src="img/product1.JPG"/>*/
    }
    $("#image_slider").html(content);
  }
});

});

Agop · Accepted Answer · 2015-07-07 20:19:45Z

1

The concepts you need to use here are $http and ng-repeat.

For example, you'd fetch your data like this:

$http.get('data/imageSlider.json')
  .success(function(data, status, headers, config) {
    $scope.images = data.items;
  });

And then you'd display it like this:

<img ng-repeat="image in images" ng-src="{{image.img}}" alt="{{image.alt}}" />

Here's a full example on Plunker.

answered Jul 7, 2015 at 20:19

Agop

1,91717 silver badges23 bronze badges

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

2 Comments

Pallavi Over a year ago

thanks for answering previous question @Agop here is one more thing i am creating image slider so i want to use arrow button images in json data.I want to access them as arrow buttons on which i click the set of next images will come... one more question how can I pull only 3 images from middle out of 6.

Agop Over a year ago

In order to do that, you'll need to create some new scope variables and use them in your view. A lot of these topics are covered in the Angular Tutorial, so I highly recommend reading through it.

Collectives™ on Stack Overflow

How to pull image from json to html in angular js without using rest?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related