如何使用AngularJS 1.6获取并访问指定格式的JSON数据

嘿，我来帮你搞定AngularJS 1.6里处理这份酒店JSON数据的问题！下面分步骤给你讲清楚：

在AngularJS 1.6中，最常用的获取外部JSON数据的方式是内置的$http服务。需要注意的是，1.6版本已经弃用了旧的.success()和.error()方法，必须使用Promise风格的.then()和.catch()来处理请求结果。

示例代码（控制器中实现） #

// 定义你的Angular应用和控制器
angular.module('hotelApp', [])
.controller('HotelListController', ['$scope', '$http', function($scope, $http) {
  // 情况1：从本地JSON文件或远程API获取数据
  $http.get('hotels.json') // 替换成你的JSON文件路径或API地址
    .then(function(response) {
      // 请求成功，把返回的数据绑定到$scope上
      $scope.hotelData = response.data;
      console.log('成功获取酒店数据:', $scope.hotelData);
    })
    .catch(function(error) {
      // 请求失败时的错误处理
      console.error('获取数据出错:', error);
    });

  // 情况2：如果只是测试，也可以直接在控制器里模拟数据
  // $scope.hotelData = [
  //   { id: 10, hotelName: "TajBanjara", pricePerNight: 200.23, nbOfNights: 3, totalPrice: 600.6899999999999 },
  //   { id: 11, hotelName: "TajKrishna", pricePerNight: 90.23, nbOfNights: 2, totalPrice: 180.46 },
  //   { id: 12, hotelName: "Novatel", pricePerNight: 100.23, nbOfNights: 3, totalPrice: 300.69 }
  // ];
}]);

数据获取到之后，不管是在控制器里处理，还是在视图中展示，都可以通过数组索引+对象属性的方式访问id、hotelName等字段。

2.1 在控制器中访问字段 #

如果需要在控制器里对数据做处理，直接通过数组下标和属性名即可：

// 比如获取第一个酒店的id
var firstHotelId = $scope.hotelData[0].id;
console.log('第一个酒店ID:', firstHotelId); // 输出10

// 遍历所有酒店，打印每个酒店的名称
$scope.hotelData.forEach(function(hotel) {
  console.log('酒店名称:', hotel.hotelName);
});

2.2 在视图中访问字段（使用ng-repeat） #

在HTML视图中，用ng-repeat指令遍历数组，然后直接通过{{ 变量名.属性名 }}展示字段：

<!-- 先绑定应用和控制器 -->
<div ng-app="hotelApp" ng-controller="HotelListController">
  <!-- 遍历所有酒店数据 -->
  <div class="hotel-item" ng-repeat="hotel in hotelData">
    <h4>酒店ID: {{ hotel.id }}</h4>
    <p>名称: {{ hotel.hotelName }}</p>
    <p>每晚价格: {{ hotel.pricePerNight | currency }}</p>
    <p>入住天数: {{ hotel.nbOfNights }}</p>
    <p>总价: {{ hotel.totalPrice | currency }}</p>
    <hr>
  </div>

  <!-- 直接访问单个酒店的字段（比如第一个） -->
  <div ng-if="hotelData && hotelData.length > 0">
    <h3>第一个酒店详情</h3>
    <p>ID: {{ hotelData[0].id }}</p>
    <p>名称: {{ hotelData[0].hotelName }}</p>
  </div>
</div>

• 如果你是本地测试，直接打开HTML文件可能会遇到跨域问题，建议用本地服务器（比如http-server）运行你的项目。
• 确保$http服务已经正确注入到控制器中，不要漏掉依赖声明。
• 因为$http是异步请求，所以要确保数据加载完成后再访问字段（可以用ng-if在视图中做判断，或者在.then()回调里处理数据）。

内容的提问来源于stack exchange，提问作者Sekhar