Angularjs json data reading

Question

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]

Is there an error showing up in the console? (you can see the console by pressing F11) — Haim Houri
– Haim Houri, Commented Sep 26, 2018 at 8:11
If you are requesting anything from a different domain you should get console error like 'Access cross-origin...', and in your code $http.get('url'), 'url' should be a variable instead of a string. — huan feng
– huan feng, Commented Sep 26, 2018 at 8:22

Houssein Zouari · Accepted Answer · 2018-09-26 10:10:42Z

1

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

};

edited Sep 26, 2018 at 10:10

answered Sep 26, 2018 at 10:04

Houssein Zouari

7226 silver badges19 bronze badges

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

3 Comments

Ramesh Rajendran Over a year ago

Which is I provided in my below answer :)

Houssein Zouari Over a year ago

@RameshRajendran you wrote it one mn so i was writing at the same period. Sorry for that

Ramesh Rajendran Over a year ago

No problem :) :) :)

user6391365 · Accepted Answer · 2018-09-26 08:17:18Z

0

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.

answered Sep 26, 2018 at 8:17

user6391365

6 Comments

Stanley Ang Over a year ago

i got results on the console now, but when displaying there's nothing

Stanley Ang Over a year ago

uploaded @RameshRajendran and the error im getting when i call Uncaught Error: [$injector:modulerr]

Aleksey Solovey Over a year ago

@StanleyAng edit your question and post the error log

Ramesh Rajendran Over a year ago

Try this $scope.ninjass = response.data.SrchResults;

Ramesh Rajendran Over a year ago

@StanleyAng Please check my answer.

|

Jignesh Joisar · Accepted Answer · 2018-09-26 08:36:12Z

0

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

answered Sep 26, 2018 at 8:36

Jignesh Joisar

15.4k6 gold badges69 silver badges61 bronze badges

Comments

Ramesh Rajendran · Accepted Answer · 2018-09-26 10:04:49Z

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>

Collectives™ on Stack Overflow

Angularjs json data reading

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Related