Angular Js beginner Ajax Call

Question

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){

    });

afzalex · Accepted Answer · 2016-04-19 05:11:35Z

1

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
    })

answered Apr 19, 2016 at 5:11

afzalex

8,6602 gold badges39 silver badges66 bronze badges

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

Comments

Jai Krishnan · Accepted Answer · 2016-04-19 05:18:07Z

1

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 ;)

answered Apr 19, 2016 at 5:18

Jai Krishnan

1332 silver badges11 bronze badges

4 Comments

JC Borlagdan Over a year ago

uhmm.. i wanted to do everything using angular js, but I couldn't find answer to my question such as the angular js of parseJSON

Jai Krishnan Over a year ago

You could just go with native JSON.parse() or the Angular's Angular.fromJSON(). Also you could replace $.params with Angular's $httpParamSerializerJQLike link

JC Borlagdan Over a year ago

what difference does it make for my code other than being that as the angular way of parsing json to an object?

Jai Krishnan Over a year ago

Refer this post

Himel Nag Rana · Accepted Answer · 2016-04-19 06:16:07Z

1

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.

edited Apr 19, 2016 at 6:16

answered Apr 19, 2016 at 5:25

Himel Nag Rana

7441 gold badge11 silver badges20 bronze badges

5 Comments

JC Borlagdan Over a year ago

it didn't work.. hmm what else am i missing.. but thanks for the information sir @himel

Himel Nag Rana Over a year ago

hmm it's hard to say - where the error is occurring without the context.

JC Borlagdan Over a year ago

when I debug the code, it hits at the error, and it shows the config thing Content-Type:"application/x-www-urlencoded;charset=utf-8;"

Himel Nag Rana Over a year ago

my bad - there was a semi colon missing after the config variable declaration. Can you check now pls?

JC Borlagdan Over a year ago

hmm it didn't change a thing, it doesn't hit in success nor error :( sorry for being so noob -_-

Veshraj Joshi · Accepted Answer · 2016-04-19 08:35:12Z

0

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

answered Apr 19, 2016 at 8:35

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

1 Comment

JC Borlagdan Over a year ago

the value i'm gonna write for the authorization is that 'Basic YmVlcDpib29w'; also?

Collectives™ on Stack Overflow

Angular Js beginner Ajax Call

4 Answers 4

Comments

4 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related