使用 $http 从 json 获取图片，只获取第一个答案

【问题标题】：Get images from json with $http, get only first one使用 $http 从 json 获取图片，只获取第一个
【发布时间】：2016-06-19 22:59:50
【问题描述】：

这是 js 文件，我如何访问图像部分并仅在 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>

如果我只输入 {{item.images}} 我将返回 ["..linktoimage"] 并且我需要删除括号和引号

查看此处截取的代码

【问题讨论】：

请格式化您的问题。它不可能理解任何东西

标签： angularjs json api

【解决方案1】：

问题在于您将一个数组（只有一个项目）分配给 img 的 src，而不是传递实际的 img url 字符串，所以调整这一点，它应该是固定的：

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

【讨论】：

谢谢伙计！你能解释一下你刚刚做了什么吗？ :D
不客气！当您使用 {{item.images | limitTo:1}} 结果将是只有 1 个元素的 Array 类型。因此，当它被用作字符串（在本例中为图像 src）时，它会将数组字符串化，而不是您想要的元素。我所做的只是检查 item.images 是否至少有 1 个元素，如果是这种情况，则返回 item.images[0] 这是 item.images 数组中的第一个元素。否则它返回一个空字符串。添加这个条件只是为了避免 item.images 为空时出错。
我能再问你一件事吗？我在同一个项目中与明星作斗争。在 Json 中，我的星星数为 2,3.... 以及如何将其转换为 unicode ★ 而不是仅仅获得 2 或 3 个 unicode 字符的数字？
因此，假设您有一个名为 obj 的对象和一个名为 rating 的变量（这是您的包含星号或星号的字符串），那么您可以使用 @ 而不是使用 {{obj.ranking}} 987654322@ \u2605 是十进制 9733 的十六进制等效值
抱歉，我无法在 cmets 中正确输入，所以我将正确的输入粘贴到新答案中。

【解决方案2】：

在你的控制器中定义这个方法：

 $scope.getReplacedStars = function(input)
        {
            return input.replace(/\*/g, '\u2605');
        }

然后在 HTML 中使用它：

{{getReplacedStars(item.stars)}}

【讨论】：