sending array by ajax call in angular js

Question

I use the following code to send some information to my servlet to process data:

 $http({
                method: "GET",
                url: "http://localhost:8080/purchase/AddInfo",
                data: {
                    addArray : "sample"
                }
            })
                .success(function (data, status, headers, config) { 
                     typesHash.push( {id:data.id,name : data.name, price : data.price,unit:2.5 });
                })
                .error(function (data, status, headers, config) { 

                });

and it works perfectly; but as you can see I want to send the parameters as an array not a string , lets say I have an array as follow:

  var typesHash=[
                 {id:'1', name : 'lemon', price : 100,unit:2.5 },       
                 {id:'2', name : 'meat', price : 200,unit:3.3  }];

now I want to send this array to the server, one quick and ugly way is to loop through the array that I have and send send the information as an string but I believe there should be a better way , can any one help?

Update: as it is suggested I changed my code to the following :

 $http({
                method: "post",
                url: "http://localhost:8080/purchase/AddInfo",
                    addArray : typesHash

            })
                .success(function (data, status, headers, config) { 
                     typesHash.push( {id:data.id,name : data.name, price : data.price,unit:2.5 });
                })
                .error(function (data, status, headers, config) { 

                });

But I get null when I try to rceive it and this is how I receive it in my servlet:

String arr= request.getParameter("addArray");
    System.out.println(arr);

Update 2:Here is the most updated code

My servlet:

protected void doGet(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub

    String actionType = request.getParameter("addArray");
    System.out.println(actionType);
    PrintWriter out = response.getWriter();
    response.setContentType("text/html");
    String str = "{ \"id\": \"1\",\"name\": \"ali\",\"price\": \"100000\"}";
    // System.out.println(str);
    out.println(str);
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
 *      response)
 */
protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doGet(request, response);

}

My js:

 $http({
                method: "post",
                url: "http://localhost:8080/purchase/AddInfo",
               data: { addArray : typesHash } 


            })
                .success(function (data, status, headers, config) { 
                     typesHash.push( {id:data.id,name : data.name, price : data.price,unit:2.5 });
                })
                .error(function (data, status, headers, config) { 

                });

Hmm, I see! I think this is what you need docs.angularjs.org/api/ng/service/$http — Olatunde Garuba
– Olatunde Garuba, Commented Feb 7, 2015 at 22:52
Hey what is the output of this line "System.out.println(arr);" in servlet console? And don't use get use post because get has size limit in java. — squiroid
– squiroid, Commented Feb 8, 2015 at 6:03
And one more thing this line addArray : typesHash, should be data:typesHash — squiroid
– squiroid, Commented Feb 8, 2015 at 6:05
@squiroid thanks for your advice system.println gives me null — HMdeveloper
– HMdeveloper, Commented Feb 8, 2015 at 6:10
Hey follow first this tutorial doublecloud.org/2013/09/… .First of you need to little alter your front end code and small changes in servlet will help you. — squiroid
– squiroid, Commented Feb 8, 2015 at 6:29

squiroid · Accepted Answer · 2015-02-08 09:42:48Z

1

Hey you can do it like this :-

 $http({
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      url: "http://localhost:8080/purchase/AddInfo",
      data: { addArray : typesHash } 


        })
            .success(function (data, status, headers, config) { 
                 typesHash.push( {id:data.id,name : data.name, price : data.price,unit:2.5 });
            })
            .error(function (data, status, headers, config) { 

            });

Source :-http://www.doublecloud.org/2013/09/angular-javascript-framework-interacting-with-java-servlet-backend/

answered Feb 8, 2015 at 9:42

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

1 Comment

HMdeveloper Over a year ago

Thanks a lot I learnt a lot from your this, just a quick question while a go I asked a question and you solved the problem now there is another problem related to that , can you please take a look?stackoverflow.com/questions/28397305/…

Matan Gubkin · Accepted Answer · 2015-02-07 23:19:13Z

0

HTTP has several methods in it: 'GET' - allows you to accept data from a the requested server. 'POST' - allows you to send data to the server and accept. 'PUT' - update data etc...

try this code:

$http({
            method: "post",
            url: "http://localhost:8080/purchase/AddInfo",
                {addArray: typesHash}

        })
            .success(function (data, status, headers, config) { 
                 typesHash.push( {id:data.id,name : data.name, price : data.price,unit:2.5 });
            })
            .error(function (data, status, headers, config) { 

            });

edited Feb 7, 2015 at 23:19

answered Feb 7, 2015 at 22:44

Matan Gubkin

3,2096 gold badges29 silver badges47 bronze badges

14 Comments

HMdeveloper Over a year ago

Thank you but when I try to get in my servlet I can not ... How can I get it in servlet?

Matan Gubkin Over a year ago

what is the error that the server returning you? maybe you need to define a specific server side code for the a post request? i am not so familiar with java based servers as it is a very old and an unefficient technolegy.

HMdeveloper Over a year ago

I usually get the parameter like this :String actionType = request.getParameter("addArray"); and in javascript I have addArray:typeHash but I do not know how to gte it in this case

Matan Gubkin Over a year ago

first of all take a look at this: docs.angularjs.org/api/ng/service/$http . i can see that your server side is asking for the param 'addArray'? if that so you should send this object in the post request params: {addArray: 'your data'}

HMdeveloper Over a year ago

Thank you but I get null now when I try what you said please see my update

|

Collectives™ on Stack Overflow

sending array by ajax call in angular js

2 Answers 2

1 Comment

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related