current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite
1

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>
share|improve this question
    
imagePath is an array. so iterate each elements <div ng-repeat="img in user.imagePath" > <img ng-src="{{img}}"> </div> – ciril sebastian Aug 26 at 9:47
up vote 1 down vote 
<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>
share|improve this answer
    
thanx Dawid , it worked – devanshsadhotra Aug 26 at 10:13
up vote 0 down vote

Try this if you want to load all images:

 <img ng-repeat="imagePath in user.imagePath" ng-src="{{imagePath }}">
share|improve this answer
up vote 0 down vote

try to use a nested loop 

<img ng-repeat="singleImg in user.imagePath" ng-src="{{singleImg}}">
share|improve this answer
up vote 0 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.