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

<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>

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

Try this if you want to load all images:

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

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

try to use a nested loop

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

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

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>

Collectives™ on Stack Overflow

fetching data from JSON array in angularJS

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related