Question

我关注this answer的信息但它在我的情况下并不起作用。 Chrome Inspector控制台说＆＃34; ReferenceError：dataResponse未定义＆＃34; 也许这就是问题？

我正在尝试从url获取此JSON：

[{"app_id":1,"app_name":"oh yeeah","app_description":"desc","app_price":111,"is_activated":false,"video":"videolink"},{"app_id":2,"app_name":"oh yeaaaeah","app_description":"ewaewq","app_price":222,"is_activated":false,"video":"fuck off"},{"app_id":3,"app_name":"oh yeaaaeah","app_description":"ewaewq","app_price":333,"is_activated":false,"video":"fuck off"}]

这是我的javascript代码

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

appstore.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.getData = function(callbackFunc) {
        $http({
                method: 'GET',
                url: '/administrator/components/com_apps/loadAppsJson.php'
    }).success(function(data){
        callbackFunc(data);
    }).error(function(){
        alert("error");
    });
    }
});

appstore.controller('app_Ctrl', function($scope, dataService) {

  $scope.apps = [
                  {app_id:1, app_name:'oh yeah', app_description:'$app_description', app_price:111, is_activated:false, video:'$videolink'},
                  {app_id:2, app_name:'oh yeah', app_description:'$app_description', app_price:111, is_activated:false, video:'$videolink'},
                  {app_id:3, app_name:'oh yeah', app_description:'$app_description', app_price:111, is_activated:false, video:'$videolink'},
                ];

    //$scope.apps = null;
    dataService.getData(function(dataResponse) {
        $scope.apps = dataResponse; 
        alert(dataResponse);
    });
    console.log(dataResponse);
    console.log($scope.apps);



    //get images thumbs
    for(app = 0; app <= $scope.apps.length-1; app++) {
        $scope.apps[app].thumb = ("000" + $scope.apps[app].app_id).slice(-3);
    }

    //separate apps to columns
    var columns = [];
    for (var i = 0; i < $scope.apps.length; i++ ) {
        if (i % 3 == 0) columns.push([]);
        columns[columns.length-1].push($scope.apps[i]);
    }
    $scope.columns = columns;
    });

我的HTML视图

<div ng-controller="app_Ctrl">
<div class="row"></div>
<div class="row">

<div class="row" ng-repeat="apps in columns">
<div id="app_id_{{ app.app_id }}" class="col-lg-4" ng-repeat="app in apps | filter:search">
    <div class="thumbnail" ng-class="app.is_activated ? 'activated' : ''">
        <a href="{{ app.video }}/&hd=1&fs=1&width=90%&height=90%&resize_to=height&showinfo=0" class="app_video_stitok movie-video help-video" rel="prettyPhoto"></a>
        <a href="index2.php?option=com_apps&amp;mode=detail&amp;id={{ app.app_id }}" class="app_detail_link_absolute"><!-- --></a>
        <a href="index2.php?option=com_apps&amp;mode=detail&amp;id={{ app.app_id }}" class="app_detail_link"><img ng-src="/images/apps/app_images/{{ app.thumb }}_thumb.jpg" alt="{{ app.app_name }}" title="{{ app.app_name }}"></a>
        <div class="caption">
            <h3><a href="index2.php?option=com_apps&amp;mode=detail&amp;id={{ app.app_id }}">{{ app.app_name }}</a></h3>
            <p class="app_price">{{ app.app_price }} €</p>
            <div style="clear:both;"></div>
            <p class="app_card_description">{{ app.app_description | limitTo:100 }}...</p>
            <a href="index2.php?option=com_apps&amp;mode=detail&amp;id={{ app.app_id }}" class="btn btn-primary">Info</a>
            <a href="{{ app.video }}/&hd=1&fs=1&width=90%&height=90%&resize_to=height&showinfo=0" title="video" class="movie-video help-video btn btn-info" style="display:inline !important; z-index: 100;" rel="prettyPhoto">Video <span class="glyphicon glyphicon-facetime-video"></span></a>
            <a href="index2.php?option=com_apps&amp;mode=detail&amp;type=ajax&amp;id={{ app.app_id }}" class="btn btn-primary btn-activate" ng-class="app.is_activated ? 'btn-activated' : ''">{{ app.is_activated ? 'Aktivované' : 'Aktivovať' }}</a>
        </div>
    </div>
</div>
</div>

Answer 1

详细说明@Mritunjay在评论中所说的话;使用评论审核此代码：

dataService.getData(
// this is your callback function which has an argument for dataResponse
// the dataResponse variable will only be defined within the Call back function
function(dataResponse) {
    $scope.apps = dataResponse; 
    alert(dataResponse);
// The Curly Brackets that follow mark the end of the callback handler method  
});
// This log statement is not in the callback handler and there is no defined dataResponse variable which is probably why you got an error in the console
console.log(dataResponse);

您可以通过将dataResponse日志移动到回调方法来解决此问题，如下所示：

dataService.getData(function(dataResponse) {
    $scope.apps = dataResponse; 
    alert(dataResponse);
    console.log(dataResponse);
});

您的代码似乎存在其他问题，因为您在返回数据之前尝试访问$ scope.apps;这会妨碍你的处理。最简单的方法是将该处理移动到结果处理程序中：

// define $scope.columns outside of the result handler
$scope.columns = [];
// call to method in service
dataService.getData(function(dataResponse) {
    $scope.apps = dataResponse; 
    alert(dataResponse);
    console.log(dataResponse);

    // inside the result handler; you run this code after $scope.apps is defined:
    for(app = 0; app <= $scope.apps.length-1; app++) {
       $scope.apps[app].thumb = ("000" + $scope.apps[app].app_id).slice(-3);
    }

    //separate apps to columns
    var columns = [];
    for (var i = 0; i < $scope.apps.length; i++ ) {
        if (i % 3 == 0) columns.push([]);
        columns[columns.length-1].push($scope.apps[i]);
    }
    $scope.columns = columns;
  });

Answer 2

这就是承诺和异步调用的全部内容。

console.log(dataResponse);
console.log($scope.apps);

第一个不起作用，因为dataResource是一个私有变量，而不是您尝试打印的同一个范围的一部分。第二个将无法工作，因为在未来的时间（X秒后）填充了get，在$ http请求完成后，它将仅在该点可用。

填充对象后执行某项操作的一种方法是使用

$scope.$watch("apps", function (){
// do stuff
});

如何让json在angularJS中工作？

2 个答案: