Showing the first image from a nested array in angularjs

Question

This is my json. I need to show only the first image in my imageview. i tried with {{p.url}} to get the images. but its not worked fine.

 [{

        "comment": "",
        "adoptId": null,
        "images": [
          {
            "id": 4,
            "name": "3_1.jpg",
            "url": "Content\\RacePictures\\YRMTH-2017-04-15-HT09.jpg"
          },
          {
            "id": 5,
            "name": "3_2.jpg",
            "url": "Content\\RacePictures\\YRMTH-2017-04-15-HT09.jpg"
          }
        ]

HTML

    <div class="" ng-repeat="d in photos">
     <div class="col-md-6" >
    <div ng-repeat="p in d.images">
    <img ng-src="http://localhost:20513/{{p.url}}" />
  </div>

Angular Controller

    var httpRequest = $http({
                method: 'GET',
                url: urls.api + 'Library/treeImages/Filter/' + images,
      }) .success(function (data, status) {
    $scope.photos = angular.fromJson(data);
                            }
)
}

try this <img ng-src="http://localhost:20513/{{d.images[0].url}}" /> — Hadi
– Hadi, Commented May 3, 2017 at 4:33

Nair Athul · Accepted Answer · 2017-05-03 05:04:44Z

2

<div class="" ng-repeat="d in photos">
   <div class="col-md-6" >
       <img ng-src="http://localhost:20513/{{d.images[0].url}}" />
   </div>
</div>

try this

edited May 3, 2017 at 5:04

answered May 3, 2017 at 4:33

Nair Athul

8219 silver badges21 bronze badges

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

2 Comments

Manojkanth Over a year ago

<div ng-repeat="p in d.images"> with this line it showing the all the images bro. actually we dont need this line.

Nair Athul Over a year ago

Updated the answer. :)

Sachila Ranawaka · Accepted Answer · 2017-05-03 04:34:37Z

1

just remove the ng-repeat and access the image array by the index

<div class="" ng-repeat="d in photos">
     <div class="col-md-6" > 
    <img ng-src="http://localhost:20513/{{d.images[0].url}}" />
 </div>

answered May 3, 2017 at 4:34

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

Sachila Ranawaka Over a year ago

@Coder no prob machan

Collectives™ on Stack Overflow

Showing the first image from a nested array in angularjs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related