如何让json在angularJS中工作?

How do I make json get to work in angularJS?

本文关键字：工作 angularJS json      更新时间：2023-09-26

我遵循了这个答案的信息但这对我的情况不起作用。Chrome检查器控制台显示"ReferenceError: datresponse未定义"也许这就是问题所在?

我正在尝试从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;
    });

My HTML view

<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>

详细说明@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。数据返回前的应用程序;这会阻碍你的处理。最简单的方法是将该处理移动到结果处理程序中:

// 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;
  });

这就是承诺和异步调用的意义所在。

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

第一个将不起作用，因为dataResource是一个私有变量，而不是您试图打印的相同作用域的一部分。第二个也不能工作，因为get在以后的时间(X秒之后)填充，在$http请求完成之后，所以它只在那时可用。

在对象填充完成后执行操作的一种方法是使用

$scope.$watch("apps", function (){
// do stuff
});
相关文章：