CODEWITHSUNDEEP
javascriptjqueryangularjsajax
JC Borlagdan
JC Borlagdan

Reputation: 3618

Angular Js beginner Ajax Call

I'm new to angular js, Inside my controller.js are controllers for my app, which is 100% working. What I'm having problem is how to make an ajax call using angular js. I'm trying to fetch data from my service and pass it to my index.html using this ajax. When I try to debug the code, it only hits on $http but doesn't go through the code inside it. What am I doing wrong here?

$http({
        method: 'POST',
        url: 'http://someService.site.net/site.aspx',
        data:{action:'someAction', position:'founders'},
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response){

        var json =jQuery.parseJSON(response);
        var htmldata="";
        for(i=0; i<json.length; i++)
        {
            var htmlInfo = '<li><div class=\'col\'><a href="'+ json[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+json[i].Image + '" class=\'profile-img\' /><h3>' +json[i].Name+'</h3><p>'+json[i].Title+'</p></a></div></li>';

            htmldata+= htmlInfo;
        }
        jQuery("#vflist").html(htmldata);
    }, function errorCallback(response){

    });

Upvotes: 1

Views: 81

Answers (4)

Veshraj Joshi
Veshraj Joshi

Reputation: 3579

put this line before calling ajax this works for me hope for you to

$http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';
// YmVlcDpib29w you can put any string

This is also given in- https://docs.angularjs.org/api/ng/service/$http

Upvotes: 0

Himel Nag Rana
Himel Nag Rana

Reputation: 744

First thing is: you can simply use your $http function like this:

var config = {
    headers : {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}};

$http.post('http://someService.site.net/site.aspx',
           {action:'someAction', position:'founders'},
           config)
     .success(function(response) {
        var json =jQuery.parseJSON(response);
        var htmldata="";
        for(i=0; i<json.length; i++) {
            var htmlInfo = '<li><div class=\'col\'><a href="'+ json[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+json[i].Image + '" class=\'profile-img\' /><h3>' +json[i].Name+'</h3><p>'+json[i].Title+'</p></a></div></li>';

            htmldata+= htmlInfo;
        }
        jQuery("#vflist").html($sce.trustAsHtml(htmldata));
     })
     .error(function(data, status, headers, config) {
          console.log(status);
     });

Secondly, as you can see in the above code I have used $sce.trustAsHtml() -- this is required when you are pushing some html to DOM via $http - or it will just show the codes with tags. You have to inject $sce in the controller definition.

Upvotes: 1

Jai Krishnan
Jai Krishnan

Reputation: 133

Since you are already using jQuery along with Angularjs I would recommend you to use the $.params() function to encode the parameter data. Your $http would be like

$http({
    method: 'POST',
    url: 'http://someService.site.net/site.aspx',
    data:$.params({action:'someAction', position:'founders'}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

Also I suggest you to use the Angular way of doing things rather than using jQuery. You might even like it ;)

Upvotes: 1

afzalex
afzalex

Reputation: 8652

Mark your breakpoints on success and error callbacks.

$http is a service. You passed the required data in it's parameter.

$http({})
       ^options

After calling this $http will do it's work and send a request to the provided url asynchronously. But You don't need to debug that part. 

$http({options})
    .then(function(data){ 
        // mark 1 breakpoint here
    }, function(data){
        // mark another breakpoint here
    })

Upvotes: 1

Related Questions