making a ajax call to populate scope data in angular js

Question

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>

It would be helpful if you posted your full Angular code instead of jQuery. — MBielski
– MBielski, Commented Mar 25, 2014 at 14:54

Marco46 · Accepted Answer · 2014-03-25 15:34:00Z

2

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.

answered Mar 25, 2014 at 15:34

Marco46

314 bronze badges

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

1 Comment

Ekata Over a year ago

if i use $http i get XMLHttpRequest cannot load getListOfJsonObjects/?foreignKeyType=JSon. No 'Access-Control-Allow-Origin' header is present on the requested resource. error

Collectives™ on Stack Overflow

making a ajax call to populate scope data in angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related