angularjs how can i view the scope data for debug

Question

Hi i am trying to figure out,Whether am receiving the data from api or not.Is there anyway to check it?I am totally new to angular.js. My code:

<html ng-app>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html">
   <title>API Webapp using AngularJS - Not So Clever Demo</title>
   <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
</head>

<body ng-controller="GitHubCtrl">

  <p>{{user.results}}<p>;



<script>
   function GitHubCtrl($scope, $http) {
      $scope.getGitInfo = function () {
         $scope.userNotFound = false;
         $scope.loaded = false;

         $http.get("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=MY_KEY")
      .success(function (data) {
         $scope.user = data;
         console.log(data);
         $scope.loaded = true;
      })
               .error(function () {
                  $scope.userNotFound = true;
               });

      }
   }
</script>

Please correct me if i did some mistakes.And help me to get this work.I tried using alert to view the data but i was not able to get it.

I'd like to see the bit where you are calling $scope.getGitInfo method — maurycy
– maurycy, Commented Jun 26, 2014 at 11:26

sylwester · Accepted Answer · 2014-06-26 09:35:20Z

1

There is a plugin for Chrome called Batarang which should helps you. Please see here: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

answered Jun 26, 2014 at 9:35

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Jain · Accepted Answer · 2014-06-26 09:40:03Z

0

You can just do the below in your html page:-

<pre>{{user}}</pre>

This will show the whole user object that is being returned.

Another thing is that, you are doing everything inside getGitInfo method on $scope, but it is never called, so user information will never get populated anyways.

Apart from this, there are lots of other minor issues with your code. If you submit a jsFiddle/plunker, I or someone else will be able to explain and correct them for you.

edited Jun 26, 2014 at 9:40

answered Jun 26, 2014 at 9:33

Abhishek Jain

2,97724 silver badges35 bronze badges

3 Comments

Abhishek Jain Over a year ago

Have a look at jsfiddle.net/jain208/TFDY5/8. I have tried to replicate your code. It doesn't work because I got an error message saying that the api key is invalid. You can sort that out, but the general code would be the same.

Abhishek Jain Over a year ago

Another thing is that typically you would put your http calls in a separate service and not inside your controller.

Divakar Over a year ago

Thanks but i am just now starting

maurycy · Accepted Answer · 2014-06-26 11:31:56Z

Please find the below code

<script>
           function GitHubCtrl($scope, $http) {
               console.log('hello')
              //$scope.getGitInfo = function () {
                 $scope.userNotFound = false;
                 $scope.loaded = false;

                 $http.jsonp("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=MY_KEY" + $scope.username)
              .success(function (data) {
                 $scope.user = data;
                 console.log(data);
                 $scope.loaded = true;
              })
                       .error(function () {
                          $scope.userNotFound = true;
                       });

              //}
           }
        </script>

Error which throws from the external link:

"error_message" : "The provided API key is invalid.",

Collectives™ on Stack Overflow

angularjs how can i view the scope data for debug

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related