-1

I followed information on this answer But it doesn't work in my situation. Chrome Inspector console says "ReferenceError: dataResponse is not defined" maybe that is the problem?

I am trying to GET this JSON from url:

[{"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"}]

This is my javascript code

 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>
Improve this question
2
  • 2
    that error is because you are doing console.log after getData function. Commented Jul 29, 2014 at 13:01
  • what is your callback function exactly ? put the console log inside your success(){console.log('response : ' + data);} Commented Jul 29, 2014 at 13:01

2 Answers 2

Reset to default
1

To elaborate on what @Mritunjay said in the comments; review this code with comments:

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

You can fix this by moving the dataResponse log into the callback method, like this:

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

There appear to be other problems with your code, in that you are trying to access $scope.apps before the data is returned; which will hinder your processing. Easiest approach would be to move that processing into the result handler:

// 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; });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

That's what promises and asynchronous calls are all about.

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

The first one won't work because dataResource is a private variable and not part of the same scope you're trying to print. The second one won't work either because that get's populated at future time (after X seconds), after the $http request is finished so it will only be availableat that point.

One way to do something after the object is populated is to use 

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.