Jovan Poplasen Jovan Poplasen - 5 months ago 17
AngularJS Question

Get images from json with $http, get only first one

This is the js file, how can i access to the images section and show only first in html ?



var Test = angular.module('test', []);

Test.controller('hotelsController', ['$scope', '$http', function($scope, $http) {

var images;

$scope.getHotels = function() {
$http.get('http://fake-hotel-api.herokuapp.com/api/hotels')
.success(function(data) {
$scope.hotels = data;
images = data[0].images;
console.log(angular.fromJson(images));
})
.error(function(data) {
$scope.hotels = "Response failed";
});
}
}]);

<p>This is the css of the tests</p>

h1 {
text-align: center;
margin-bottom: 50px
}

.container {
width: 1630px;
margin: 0 auto
}

body {
font-family: Open Sans, sans-serif;
color: #000
}

.btn-grey {
background: #e5e5e5;
width: 320px;
text-align: center;
height: 50px;
line-height: 47px;
border-radius: 5px;
color: #323232;
font-size: 26px;
display: inline-block;
border: 1px solid #979797
}

.btn-grey:hover {
color: #323232;
background: #ccc
}

.hotels .hotel {
height: 480px;
width: 100%;
margin-top: 115px;
border: 1px solid #979797;
border-radius: 5px;
margin-bottom: 48px
}

.hotels .hotel .hotel-image {
width: 654px;
border-right: 1px solid #979797;
float: left;
background: #e5e5e5;
height: 478px
}

.hotels .hotel .hotel-image img {
height: 478px
}

.hotels .hotel .hotel-description {
width: calc(100% - 655px);
float: left;
padding: 0 35px;
background: #f6f6f6;
position: relative;
height: 478px
}

.hotels .hotel .hotel-description .hotel-stars {
position: absolute;
top: 20px;
right: 20px
}

.hotels .hotel .hotel-description h2 {
font-size: 42px;
font-weight: 600;
color: #000;
margin: 35px 0 20px
}

.hotels .hotel .hotel-description h3 {
font-size: 24px;
font-weight: 300;
margin: 0 0 50px
}

.hotels .hotel .hotel-description p {
font-size: 22px;
line-height: 26px;
margin-bottom: 50px;
height: 78px;
overflow: hidden
}

.hotels .hotel .hotel-description .hotel-price {
float: right;
font-size: 60px;
color: #323232;
text-align: right
}

.hotels .hotel .hotel-description .hotel-price .date {
display: block;
font-size: 24px;
font-weight: 300
}

<p>This is the html of the file</p>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test">
<h1>Test</h1>

<div class="container" ng-controller="hotelsController">
<center><a href="javascript:void(0)" ng-click="getHotels()" class="btn-grey">Load Hotels</a></center>
<div class="hotels" ng-cloak>
<div class="hotel clearfix" ng-repeat="item in hotels | limitTo:5">
<div class="hotel-image">
<img ng-src="{{item.images | limitTo:1}}" alt="">
</div>
<div class="hotel-description">
<div class="hotel-stars">
{{item.stars}} &#9733;
</div>
<h2>{{item.name}}</h2>
<h3>{{item.city}} - {{item.country}}</h3>
<p>
{{item.description}}
</p>
<a href="#" class="btn-grey">Show Reviews</a>
<div class="hotel-price">
{{item.price}} &euro;
<span class="date">
{{item.date_start | date}} - {{item.date_end | date}}
</span>
</div>
</div>
</div>
</div>
</body>





if i put only {{item.images}} i will return me ["..linktoimage"] and i need to remove brackets and quotation marks

See code sniped here

Answer

The problem being you're assigning an array (with just one item) to the img's src rather than passing the actual img url string, so tweak this bit, it should be fixed:

<div class="hotel clearfix" ng-repeat="item in hotels | limitTo:5">
        <div class="hotel-image">
          <img ng-src="{{(item.images.length>0?item.images[0]:'')}}" alt="">
        </div>
...
Comments