CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatangular-ui
Ekata
Ekata

Reputation: 289

making a ajax call to populate scope data in angular js

Hello i have a angular js controller like this

function InstantSearchController($scope){

$scope.items = [
    {
        url: 'http://tutorialzine.com/2013/04/services-chooser-backbone-js/',
        title: 'Your First Backbone.js App – Service Chooser',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/04/service_chooser_form-100x100.jpg'
    }
];

}

and i have a ajax call 

function getListOfJsonObjects(){
$.ajax({
    url:"http://"+window.location.host+"/getListOfJsonObjects",
    type: "GET",
    beforeSend: function (request)
    {
        request.setRequestHeader("JSESSIONID",  $.cookie("JSESSIONID"));
    },
    dataType: 'jsonp',
    data: {
        foreignKeyType:"OrgChartJSon",
    },
    success:
        function(dataFromServer){
        var parsedJSON = jQuery.parseJSON(JSON.stringify(dataFromServer));                  

    },
    error:
        function(xhr, status, error){

        alert("Failed");
    }
});

}

how can i make a $http.jsonp call inorder to put response data into scope items. please help i tried with the call var responsePromise = $http.jsonp(url, {params : {foreignKeyType:"DecisionTreeJSon"} } ); even thought response status is 200 it always entered into failure method.

angular code:

<div ng-app="instantSearch" ng-controller="InstantSearchController">

<div class="bar">
    <!-- Create a binding between the searchString model and the text field -->
    <input type="text" ng-model="searchString" placeholder="Enter your search terms" />
</div>

<ul>
    <!-- Render a li element for every entry in the items array. Notice
         the custom search filter "searchFor". It takes the value of the
         searchString model as an argument.
     -->
    <li ng-repeat="i in items | searchFor:searchString">
        <a href="{{i.url}}"><img ng-src="{{i.image}}" /></a>
        <p>{{i.title}}</p>
    </li>
</ul>

Upvotes: 3

Views: 3929

Answers (1)

Marco46
Marco46

Reputation: 31

Don't use jQuery at all in AngularJS projects.

You must use $http $resource services to query webservices.

Here is a plunker to show how to use $http to fill the scope, it is not jsonp but you should easily extends this example.

Upvotes: 2

Related Questions