How to return Ajax call value in angularjs $scope and bind it to ng-repeat

Question

i'm trying to return ajax call value put in $scope in angular js but getting nothing idon't what happing here can you please check my code which i write below are the code

function GetDataarray() {
        var jqxhr = $.ajax({
            type: 'GET',
            url: '@Url.Content("~/Home/GetPesrons")',
            data: '{}',
            dataType: 'json',
            success: function (data, textStatus, XMLHttpRequest) {
                //alert(JSON.stringify(data));
                return JSON.stringify(data);
            }
        });
    }

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

    $scope.filt = 'All';
    $scope.setFilter = function (letter) {
        $scope.filt = letter;
    };

    $scope.names = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    $scope.startsWith = function (customer) {
        var lowerStr = (customer.Name + "").toLowerCase();
        var letter = $scope.filt;
        if (letter === 'All') return true;
        return lowerStr.indexOf(letter.toLowerCase()) === 0;
    }

    $scope.Customer = GetDataarray();

});

And Html is here :

<div data-ng-app="Napp" ng-controller="GetAlphabetical">
Search : 
<input type="text" ng-model="txtsearch" />
<table>
    <tr>
        <td ng-repeat="letter in names">&nbsp;<span ng-click="setFilter(letter)">{{letter}}</span>|</td>
    </tr>
</table>
<br />
<ul>
    <li ng-repeat="cust in Customer | filter:startsWith | orderBy: 'Name' | filter : txtsearch">{{cust.Name}}</li>
</ul>

What does /Home/GetPesrons return? Can you check ajax call? May be ist misspelled and should be GetPersons — Mathias F
– Mathias F, Commented Aug 14, 2015 at 11:05
Oops . Don't mix drink and drive . You are using jQuery's $.ajax . Don't mix jquery and angular . check for $http service in angular . You will get your answer . Binding won't work the way your are doing it . — Anil Sharma
– Anil Sharma, Commented Aug 14, 2015 at 11:07
Return /Home/GetPesrons is an array should be like Customer= [{ ID: 1, Name: 'Nayeem', City: 'Indore' }, { ID: 2, Name: 'Sanjay', City: 'Bhopal' }, { ID: 3, Name: 'Aditya', City: 'Jhansi' }]; — Nayeem Mansoori
– Nayeem Mansoori, Commented Aug 14, 2015 at 11:10
@NayeemMansoori Can you please let us know the Response of API — Mohan Singh
– Mohan Singh, Commented Aug 14, 2015 at 11:23

Mohan Singh · Accepted Answer · 2015-08-14 11:20:58Z

1

Controller Code

    var app = angular.module('Napp', []);
    app.controller('GetAlphabetical', function ($scope, $http) {

        $scope.filt = 'All';

        $scope.setFilter = function (letter) {
            $scope.filt = letter;
        };

        $scope.names = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

        $scope.startsWith = function (customer) {
            var lowerStr = (customer.Name + "").toLowerCase();
            var letter = $scope.filt;
            if (letter === 'All') return true;
            return lowerStr.indexOf(letter.toLowerCase()) === 0;
        }

        function getCutomers() {
            $http.get('@Url.Content("~/Home/GetPesrons")').then(function (response) {
                var _data = angular.fromJson(response);
                $scope.customers = _data.data; // please check the request response if list id in data object 
            }, function (error) {
                throw error;
            })
        }

        getCutomers();

    });

HTML CODE

<ul>
  <li ng-repeat="cust in customers | filter:startsWith | orderBy: 'Name' | filter : txtsearch">{{cust.Name}}</li>
</ul>

answered Aug 14, 2015 at 11:20

Mohan Singh

8838 silver badges18 bronze badges

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

2 Comments

Nayeem Mansoori Over a year ago

Thanks friend i'm new in angularjs

Mohan Singh Over a year ago

@NayeemMansoori most welcome. Let me help you if have any other issue

Anil Sharma · Accepted Answer · 2015-08-14 11:23:06Z

1

Angular data binding will not work the way you are using it . Please don't mix jquery and angular. So take a look at $http service(xhr service of angular) .

below is sample get call . So either put it in your controller or in your factory service .

// Simple GET request example :
 $http.get('/someUrl').
  then(function(response) {
  // this callback will be called asynchronously
   // when the response is available
  }, function(response) {
   // called asynchronously if an error occurs
   // or server returns response with an error status.
  });

In your controller add this

 var app = angular.module('Napp', []);
app.controller('GetAlphabetical', function ($scope, $http) {

    $scope.filt = 'All';

    $scope.setFilter = function (letter) {
        $scope.filt = letter;
    };

    $scope.names = ['All', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

    $scope.startsWith = function (customer) {
        var lowerStr = (customer.Name + "").toLowerCase();
        var letter = $scope.filt;
        if (letter === 'All') return true;
        return lowerStr.indexOf(letter.toLowerCase()) === 0;
    }

    function getCutomers() {
        $http.get('Home/GetPesrons').then(function (response) {
            var _data = angular.fromJson(response);
            $scope.customers = response.data; // please check the request response if list id in data object 
        }, function (error) {
            throw error;
        })
    }

    getCutomers();

});

edited Aug 14, 2015 at 11:23

answered Aug 14, 2015 at 11:16

Anil Sharma

2,9625 gold badges32 silver badges45 bronze badges

2 Comments

Nayeem Mansoori Over a year ago

You say right please give me idea how call mvc controller call in angularjs

Anil Sharma Over a year ago

check answer again . I have copied Mohan code. You just need to call this $http service in your controller or service and then assign the output to $scope so binding can take place . give right ajax url and see if it works for you .

Collectives™ on Stack Overflow

How to return Ajax call value in angularjs $scope and bind it to ng-repeat

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related