Jovan Poplasen Jovan Poplasen - 2 years ago 88
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() {
.success(function(data) {
$ = data;
images = data[0].images;
.error(function(data) {
$ = "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=""></script>
<body ng-app="test">

<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 class="hotel-description">
<div class="hotel-stars">
{{item.stars}} &#9733;
<h3>{{}} - {{}}</h3>
<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}}

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 Source

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="">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download