fetching data from JSON array in angularJS

Question

From below JSON I want to retrieve all images from imagePath array. If I try to retrieve single image, it is being fetched smoothly. But the difficulty is arising while fetching imagePath array. Help me with the issue. Thanks

1). JSON

  [{
   "senderName": "ABC",
   "text": "Enjoy",
   "imagePath": [
       "../img/jellyfish.jpg",
       "../img/cat.jpg",
       "../img/fatmice.jpg",
       "../img/duck.jpg",
       "../img/d.jpg"],
    "senderImage": "../img/abc.jpg"
  }, {
    "senderName": "XYZ",
    "text": "Enjoy",
    "imagePath": [
        "../img/jellyfish.jpg",
        "../img/cat.jpg",
        "../img/d.jpg"],
    "senderImage": "../img/abc.jpg"
  }, {
    "senderName": "PQR",
    "text": "Enjoy",
    "imagePath": [
        "../img/jellyfish.jpg",
        "../img/cat.jpg",
        "../img/d.jpg"],
    "senderImage": "../img/abc.jpg"
  }]

2). that is the controller.js file for the above JSON

     http.get('../js/postData.json')
      .success(function (response) {
         $scope.data = response;
        console.log(response);        
      }).error(function (err) {
        console.log(err);
       })

3). And the corresponding HTML file is :

   <div class="list" ng-repeat="user in data">
     <a class="item item-avatar">
     <img ng-src="{{user.senderImage}}" align="left">
     <h4 align="left">
         {{user.senderName}}
     </h4>
   </a>
   <p>
     {{user.text}}
    </p>
   <div>
    <img ng-src="{{user.imagePath}}">
   </div>
   </div>

imagePath is an array. so iterate each elements <div ng-repeat="img in user.imagePath" > <img ng-src="{{img}}"> </div> — ciril sebastian
– ciril sebastian, Commented Aug 26, 2016 at 9:47

morriq · Accepted Answer · 2016-08-26 09:48:51Z

2

<div class="list" ng-repeat="user in data">
     <a class="item item-avatar">
     <img ng-src="{{user.senderImage}}" align="left">
     <h4 align="left">
         {{user.senderName}}
     </h4>
   </a>
   <p>
     {{user.text}}
    </p>
   <div>
    <img ng-src="{{image}}" ng-repeat="image in user.imagePath">
   </div>
   </div>

answered Aug 26, 2016 at 9:48

morriq

4243 silver badges14 bronze badges

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

Comments

Ruhul · Accepted Answer · 2016-08-26 09:49:30Z

0

Try this if you want to load all images:

 <img ng-repeat="imagePath in user.imagePath" ng-src="{{imagePath }}">

answered Aug 26, 2016 at 9:49

Ruhul

1,0308 silver badges15 bronze badges

Comments

Vermicello · Accepted Answer · 2016-08-26 09:49:35Z

0

try to use a nested loop

<img ng-repeat="singleImg in user.imagePath" ng-src="{{singleImg}}">

answered Aug 26, 2016 at 9:49

Vermicello

3081 gold badge6 silver badges11 bronze badges

Comments

Tarek Salah uddin Mahmud · Accepted Answer · 2016-08-26 09:53:31Z

0

try this

<div class="list" ng-repeat="user in data">
 <a class="item item-avatar">
 <img ng-src="{{user.senderImage}}" align="left">
 <h4 align="left">
     {{user.senderName}}
 </h4>
 </a>
 <p>
 {{user.text}}
</p>
<div>
    <!--Changes are made here-->
    <div ng-repeat="path in user.imagePath">
      <img ng-src="{{path}}">
    </div>
    <!--Changes ends here-->
 </div>
 </div>

answered Aug 26, 2016 at 9:53

Tarek Salah uddin Mahmud

9448 silver badges18 bronze badges

Collectives™ on Stack Overflow

fetching data from JSON array in angularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related