CODEWITHSUNDEEP
javascriptangularjsjson
Stanley Ang
Stanley Ang

Reputation: 81

Angularjs json data reading

I am trying to read json data from a url but it's not working.

This is how the json url look like (open it in firefox if chrome doesn't work).

And this is my javascript code: 

$scope.displayA = function() {
  $http.get('url').then(function(response){
    $scope.ninjass = response.data;
  });
};

I am trying to display it in a ng-repeat format, but nothing is showing.

the ng-repeat code

    <table>
      <!--  <th ng-repeat="ninja in ninjass">
             {{ ninja.id }}
        </th> -->
        <tbody>
            <tr ng-repeat="ninja in ninjass">
                <td>{{ ninja.name }}</td>
                <td>{{ ninja.description }}</td>
              <!--  <td>
                  {{ ninja.NAME }}
                </td>
                <td>{{ ninja.NAME }}</td> -->
            </tr>
        </tbody>
    </table>

The error log:

Uncaught SyntaxError: Unexpected token ]

And

Uncaught Error: [$injector:modulerr]

Upvotes: 0

Views: 86

Answers (4)

Houssein Zouari
Houssein Zouari

Reputation: 722

I detected few errors on your code . First of all it should be url without ' '; and you have to declare it above. Second thing $scope.ninjass should be above the code. To be counted as a global variable. Third thing you need yo access to "SrchResults" property inside the get call .

$scope.ninjass = response.data.SrchResults;

In total , it should be something like this.

var url = //put your url here;
$scope.ninjass = [];
$scope.displayA = function() {
  $http.get(url).then(function(response){
    $scope.ninjass = response.data.SrchResults;
  });

};

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38663

You should define $scope.ninjass=[]; globally. unless ng-repeat throw error because of the model object does not defined. Please check the below snippet; 

angular.module("test",[]).controller("testc",function($scope,$http) {   
$scope.ninjass=[];       

 $http.get('https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=historicsites&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM3ODYwNTIxLCJleHAiOjE1MzgyOTI1MjEsIm5iZiI6MTUzNzg2MDUyMSwianRpIjoiNmVhNzA3NTk5OWM1NGZlZjQ0ZDFkMzEyZTkyMmEzMmUifQ.q_MiRnCT_2owbMFfCcpVVSECOTellwvojAY5Wwz0xJY').then(function(response){
     $scope.ninjass = response.data.SrchResults;
  });
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
    <table>     
    <tbody>
        <tr ng-repeat="ninja in ninjass">
            <td><b>{{ ninja.NAME}}<b/></td>
            <td>{{ ninja.DESCRIPTION}}</td>  
        </tr>
    </tbody>
</table>
</div>

Upvotes: 0

Jignesh Joisar
Jignesh Joisar

Reputation: 15095

try to this one

$scope.displayA = function() {  
   $http.get('url').then(function(response){    
         console.log("success :- "+JSON.stringify(response.data));
         $scope.ninjass = response.data.SrchResults;
         console.log("total length :- "+$scope.ninjass.length); 
  }); 
};

Upvotes: 0

user6391365
user6391365

Reputation:

Try with this, 

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
  console.log(response.data);
}, function errorCallback(response) {
  console.log(response);
});

You must replace '/someUrl' with your url api.

Upvotes: 0

Related Questions