Angular Js ng-repeat can't getting output from json array using ajax

Question

I am using Angular Js having ajax but by using ng-repeat can't getting output from json array. On alert getting [Object object]...so on but by using $scope.names= response[0].id; , getting "1" id on alert. I need to get all data in table. Is there any way to get all data in table and also I am not using $http in controller because it not working in mobile browser but works in desktop, i don't know why?Please help!

JS

var app = angular.module('studentApp',[]);
app.controller('StudentCntrl', function($scope){

$.ajax({
    url : '/fetchAllData',
    type : 'GET',
    success : function(response){
        $scope.names=response;
        //alert($scope.names);(This is working)
          } 
     });
});

JSP

<div ng-app="studentApp" ng-controller="StudentCntrl">

      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>NAME</th>
              <th>EMAIL</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="x in names">
              <td>{{x.id}}</td>
              <td>{{x.name}}</td>
              <td>{{x.email}}</td>

            </tr>
          </tbody>
        </table>
      </div>

Json

[{"id":"1","name":"abdul","email":"[email protected]"},{"id":"2","name":"pratyush","email":"[email protected]"},{"id":"3","name":"ankit","email":"[email protected]"},{"id":"45","name":"kjhj","email":"kjhkj"},{"id":null,"name":null,"email":null},{"id":null,"name":null,"email":null},{"id":null,"name":null,"email":null},{"id":"trffs","name":null,"email":null},{"id":"afa","name":"sdgfdsg","email":"dsagdsg"},{"id":"12","name":"pppp","email":"hjk,gh"}]

Which angular version, and browser type and version? As mentioned by others, it should work in mobile if $http is used correctly. — codemax
– codemax, Commented Sep 17, 2016 at 17:56

Robbert Helling · Accepted Answer · 2016-09-17 17:54:20Z

1

When updating the scope with an $ajax call (you should use $http), you have to use $scope apply to update your bindings.

$scope.$apply(function(){
    $scope.names = response.data;
});

answered Sep 17, 2016 at 17:54

Robbert Helling

362 bronze badges

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

3 Comments

Pratyush Pranjal Over a year ago

Can you explain with a example?

Robbert Helling Over a year ago

I've build you a small example, with jQuery and $scope.$apply in the .done function. I prefer to use .done and .fail as this uses the returned promise object. codepen.io/robbert/pen/rrLQgq

Pratyush Pranjal Over a year ago

Thank you very much, its working on both desktop and mobile browser..!! :-)

Sajeetharan · Accepted Answer · 2016-09-17 17:44:54Z

1

Instead of ajax call , use $http with angular as below

var app = angular.module('studentApp', []);
app.controller('StudentCntrl', function($scope,$http) {
    $http.get('data.json').then(function (response){
                  console.log(response.data.pages);
                $scope.names = response.data;
        });
});

Here is the working DEMO

answered Sep 17, 2016 at 17:44

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

Pratyush Pranjal Over a year ago

I tried that first, it was not working in mobile browser there was some issue in spring config, so i was trying this method.

Sajeetharan Over a year ago

if you are using angular this is the way and it should work with mobile as well

Pratyush Pranjal Over a year ago

Actually I am verifying my project on mobile browser using my system ip, Is this is the reason its not working on mobile? Like 198.0.X.X:8080/home

Collectives™ on Stack Overflow

Angular Js ng-repeat can't getting output from json array using ajax

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related