Question

我是AngularJS的新手，还在学习。我正在尝试使用RESTful PokeApi来获取与神奇宝贝有关的JSON数据。我的第一步是看我是否可以在我的应用程序中加载一个神奇宝贝，所以我将URL直接与第一个神奇宝贝（Bulbasaur）相关联。我收到了数据，并在我的神奇宝贝列表中console.log()（this.pokemons这里），但我在视图中没有得到任何内容;数据只是空的，我不知道为什么！有人能解释一下吗这对我来说真的很混乱！

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>
</head>
<body ng-app ="PokedexApp">
    <div class="row">
        <div class="col-md-offset-1 form-group">
            <label for="sel1">Select list:</label>
            <select class="form-control">
                <option>All</option>
                <option>Normal</option>
                <option>Watter</option>
                <option>Fire</option>
                <option>Eletric</option>
                <option>Rock</option>
                <option>Ice</option>
                <option>Grass</option>             
                <option>Psychic</option>
                <option>Poison</option>
                <option>Dragon</option>
            </select>
        </div>
    </div>

<div class="row" ng-controller="PokemonController as pokedex">
    <div class="col-md-offset-1 col-md-6">
      <p>Name: {{pokedex.pokemons}}</p>
    </div>
</div>

<script src="angular.js"></script>
<script src="pokedex.js"></script>

SCRIPT

 (function(){

var app = angular.module('PokedexApp',[]);

app.controller('PokemonController',['$http',function($http){
    this.pokemon = {};
    this.ab = "five";
    $http.get('https://pokeapi.co/api/v2/pokemon/1/').then(function(data){
    this.pokemon = data;
     console.log(data);
    });
}]);

}）（）;

Answer 1

您正在获取数据，没问题。唯一的问题是你没有存储它。

app.controller('PokemonController',['$http',function($http){
    var pokemons = this;
    $http.get('https://pokeapi.co/api/v2/pokemon/1/').success(function(data){
    console.log(this.pokemons);
    });
}]);

基本上，

this.pokemons是你的控制者。你声明：

var pokemons = this

这基本上意味着，在AngularJS中，＆＃34;我的控制器将被称为＆＃39; pokemons＆＃39;通过这个变量＆＃34;。您正在尝试打印this.pokemons，代表this.this（这没有意义）。要评估您是否收到了数据，请尝试console.log：

console.log(data.data)。

从RESTful API接收数据时，您将收到标题和数据。因此，打印data.data将搜索您回复中的数据。

如果您想保存这些数据，您应该：

var pokemons = {} // Initializing an empty object然后：

$http.get('https://pokeapi.co/api/v2/pokemon/1/').success(function(data){
    pokemons = data.data;
    });

如果您想使用this关键字引用您的控制器，您应该执行以下操作：

var pokedex = this;
this.pokemons = {};

在下面，找到JavaScript的完整示例：

 (function(){

    var app = angular.module('PokedexApp',[]);

    app.controller('PokemonController', ['$http', function($http){
        var pokedex = this;
        this.pokemons = {};
// Calling this object response instead of data makes it more clear, imho        
$http.get('https://pokeapi.co/api/v2/pokemon/1/').success(function(response){
        console.log(response.data);
    this.pokemons = response.data;
        });
    }]);
    })();

并非您没有义务在视图和控制器中调用控制器pokedex，您可以随意调用它。

修改

如@ biology.info所述，此请求格式已弃用。您应该使用以下格式：

$http.get('https://pokeapi.co/api/v2/pokemon/1/').then(function successCallBack (response) { // Do something if your call is a success }, function errorCallBack(response) { // Do something if your call fails });

DOUBLE EDIT

另外，在您看来，您正在呼叫pokedex.pokemons，而在您的控制器中，您正在调用变量pokemon。注意名称的一致性。调用控制器变量pokemons或HTML变量pokedex.pokemon。

Answer 2

让我们来看看你的控制器主体：

var pokemons = this;
$http.get('https://pokeapi.co/api/v2/pokemon/1/').success(function(data){
  console.log(this.pokemons);
});

首先，我不确定var pokemons = this打算做什么，但实际上做的是将pokemons设置为控制器本身。控制器中的this指的是控制器。

如果您的get响应函数中指出，您要执行的操作是在控制器实例上声明pokemons属性，以便稍后可以引用this.pokemons，以及＃39;我想做的是：

this.pokemons = {};

这会将this.pokemons设置为一个空对象开始。

对于您所做的$http来电，正如@Sajeetharan所提到的，您需要将this.pokemons的值实际设置为data;它不会在背景中神奇地发生。另外，正如@ biology.info所说，现在使用$http.get(...).then()代替$http.get(...).success()会更好。总之，这将产生这个代码：

$http.get('https://pokeapi.co/api/v2/pokemon/1/').then(function(data){
  this.pokemons = data;
  console.log(this.pokemons);
});

修改

我忘了上面跟踪我的this上下文。令人讨厌的是，this内的.then()指的是回调函数，而不是控制器，因此您实际上不会将pokemon附加到控制器。要解决此问题，请将this存储在控制器顶部的变量中：

var pokedex = this;
$http.get('https://pokeapi.co/api/v2/pokemon/1/').then(function(response){
  pokedex.pokemons = response.data;
  console.log(pokedex.pokemons);
});

以下是一个工作示例：https://jsfiddle.net/40oswjyb/2/

Answer 3

正如之前的答案中所提到的，您实际上并未存储您提取的数据。实现您想要做的事情的一种方法：

控制器：

app.controller('PokemonController', ['$scope', '$http',function($scope, $http) {   
    $http
    .get('https://pokeapi.co/api/v2/pokemon/1/')
    .success(function(data){
        $scope.pokemons = data;
    });
}]);

DOM：

<div class="row" ng-controller="PokemonController as pokedex">
    <div class="col-md-offset-1 col-md-6">
        <p>Name: {{pokemons}}</p>
    </div>
</div>

注意：由于我们将pokemons存储在控制器$scope中，因此我们不再需要使用pokedex.pokemons表示法。

导入Json数据无法将其绑定到查看

3 个答案:

修改