从 ajax 成功函数中使用 json 对象（使用 angular.js）

Question

我正在使用 API 搜索歌曲，但我只是想通过使用 angular.js 中的表达式简单地显示 html 文件中数组中的 1 首歌曲。现在我遇到了一些问题，因为我想在 AJAX 调用和控制器中使用我的 JSON 对象。

(function() {
    var app = angular.module('songSelector', []);
    app.controller('playedTracksCtrl', function() {
        // this.songs = jsonObjectPlayedTracks;
        $.ajax({
            url: "http://api.q-music.be/1.2/tracks/plays?limit=20", 
            dataType: "jsonp", 
            jsonp: "callback", 
            success: function(jsonObject){
                //console.log(jsonObject); 
                //console.log(jsonObject["played_tracks"][0]);

                var jsonObjectPlayedTracks = jsonObject["played_tracks"];
                console.log(jsonObjectPlayedTracks);
            }
        });
    });
})();

<!DOCTYPE html>
<html ng-app="songSelector">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/custom.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
        <header>
            <h1 class="text-center">Vind info over de laatste 50 liedjes</h1>
            <h2 class="text-center"> - vul in - </h2>
        </header>
        <div class="list-group" ng-controller="playedTracksCtrl as overzicht">
            <div class="list-group-item">
                <h3>{{overzicht.songs[0].title}}</h3>
            </div>
        </div>
        <p>  {{"Hello, Angular!"}}  </p>  
    </body>
</html>

Answer 1

如果你想拨打ajax电话，你需要使用$http或$resource:

(function() {

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

     app.controller('playedTracksCtrl', ['songService', playedTraksCtrl]);
     app.service('songService', ['$http', songService])

     function playedTraksCtrl(songService) {
        var vm = this;

        vm.songs = {};

        songService.getPlays().then(function (data) {
          vm.songs = data;
        });
      }

      function songService($http){
        var service = {
          getPlays: getPlays
        };
        return service;

        function getPlays(){
          return $http.get('http://api.q-music.be/1.2/tracks/plays?limit=20')
          .then(function (data) {
            return data.data;
          }).catch(function (message) {
            console.log(message)
          });
        }
      }
})();

Angular为您整理JSON

我来分解一下：

function songService($http){
    var service = {
        getPlays: getPlays
    };
    return service;
}

这return是你的对象：

{
    getPlays: function () {}
}

上面的函数是我们在 return service;:

之后创建的函数

function getPlays(){
    return $http.get('http://api.q-music.be/1.2/tracks/plays?limit=20')
            .then(function (data) {
                return data.data;
            }).catch(function (message) {
                console.log(message)
            });
}

您可以立即看到此函数 return 是另一个函数的结果：$http.get()。结果是Promise。 A Promise 表示，当结果返回时会关闭一个函数。

我们需要告诉 Promise 我们想在服务和控制器中做什么。所以在服务中：

.then(function (data) {
    return data.data;
}).catch(function (message) {
    console.log(message)
});

.then() 基本上说，当 Promise 解析 then 时触发此函数。该函数有一个参数（实际上有很多，但我大部分时间只关心数据）。数据有很多属性，我们感兴趣的是你的API的结果是data。所以我们所做的就是 return 出来。

这个 Promise 链接，然后在控制器中，我们可以调用另一个 .then()。当在职人员完成呼叫时会触发此事件。

songService.getPlays().then(function (data) {
    vm.songs = data;
});

至此我们知道，数据只是我们可以使用的 JSON 对象作为 JS 对象。所以我们只是将它分配给 vm.songs 属性.

记得

A Promise 在那里是因为调用是异步的，因此如果您看到空白 space，那是因为调用尚未完成解析。当它这样做时，它将调用 then() 函数。

从 ajax 成功函数中使用 json 对象（使用 angular.js）

Using a json object out of ajax succes function (Using angular.js)

javascript

ajax

jquery

json

angularjs