javascript - AngularJS 和 Edmunds Media API 创建 MAKE MODEL YEAR 下拉列表，然后显示车辆图像

Question

--任务-- 选择下拉列表后获取 MEDIA API(Make Model Year)。

--条件-- 出现“未定义”错误。是的，能够使用品牌、型号、年份正确填写下拉菜单，但是当尝试将该结果传递给 MEDIA $http.get 时，它会给出 - 'undefined'。

Angular

// *CONNECT & GET - LIST OF CAR MAKES*
// http://api.edmunds.com/api/vehicle/v2/makes?fmt=json&api_key={api key}

$http.get('https://api.edmunds.com/api/vehicle/v2/makes?fmt=json&api_key=' + api_key )
    .success(function (data) {
        $scope.carMakes = data.makes; 
        console.log($scope.carMakes); 
        console.log($scope.carMakes[4].name); // Audi

        $scope.carModels = $scope.carMakes[4].models;
        console.log($scope.carModels[4].name); // A3


        $scope.carYears = $scope.carMakes[4].models[4].years[8]; 
        console.log($scope.carYears.year); // 2015

});

$scope.selectedCar.carmake = $scope.carMakes[4]; // <-ERROR HERE - 'undefined'

$scope.edmundsMake = "AUDI";
$scope.edmundsModel = "A3";
$scope.edmundsYear = "2015";

//GET the edmunds media api 
//Make Model Year photos
    $http.get('https://api.edmunds.com/api/media/v2/' + $scope.selectedCar.carmake + '/' + $scope.edmundsModel + '/' + $scope.edmundsYear + '/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key='+ api_key +'&fmt=json')
        .success(function (data) {
            $scope.carImages = data.photos;
            });

HTML - 可以；为 MAKE > MODEL > YEAR 创建 3 个下拉列表

 <div id="mmy" class="mmy">
    <div class="selectDdown col-lg-4 selectLabels">
    <!--  DROPDOWN of CarTypes by Carmake  -->

   <label for="{{ selectedCar.carmake }}"> Make  </label>
      <select ng-model="selectedCar.carmake" 
              ng-options="carMake.name for carMake in carMakes" 
              id="{{selectedCar.carmake}}"
              size="1">
              <option value=""> Make </option>
      </select>    
    </div>

    <!--  DROPDOWN of car models  -->
    <div class="selectDdown col-lg-4 selectLabels">
    <label for="{{ selectedCar.model }}"> Model </label>
      <select ng-model="selectedCar.model" 
              ng-options="carModel.name for carModel in selectedCar.carmake.models"
              id="{{selectedCar.model}}"
              size="1">
              <option value=""> Model </option>
      </select>
    </div>

    <!--  DROPDOWN of years  -->
    <div class="selectDdown col-lg-4 selectLabels">
    <label for="{{ selectedCar.year }}"> Year  </label>
      <select ng-model="selectedCar.year" 
              ng-options="y.year for y in selectedCar.model.years" 
              id="{{selectedCar.year}}"
              size="1">
              <option value=""> Year </option>
      </select>
    </div>
  </div>

Answer 1

$http 是一个异步函数。这意味着 $scope.carMakes 在您的成功函数返回之前不可用。

将您的代码更改为如下所示:

$http.get('https://api.edmunds.com/api/vehicle/v2/makes?fmt=json&api_key=' + api_key )
.success(function (data) {
  $scope.carMakes = data.makes; 
  $scope.selectedCar.carmake = $scope.carMakes[4];
  ...
  $http.get('https://api.edmunds.com/api/media/v2/' + $scope.selectedCar.carmake + '/' + $scope.edmundsModel + '/' + $scope.edmundsYear + '/photos?title=&category=exterior&provider=oem&width=1280&shottype=S&pagenum=1&pagesize=10&view=basic&api_key='+ api_key +'&fmt=json')
    .success(function (data) {
      $scope.carImages = data.photos;
    });
});