Unable to pass Array from Angular 2 typescript to Spring Java

Question

I am trying to pass a String array from my typescript

tmp : Array<string> = [];

So I have a function which takes in this array as a parameter input

passValues(test : Array<string>) {
   ........
   // some method to call post method from service
}

So in service

public passingOfValues( test : Array<string> ) : Observable<Array<string>> {
    let headers = new Headers({ 'Content-Type': 'application/json'} );
    let options = new RequestOptions({ headers: headers); 

    let response = this.http.post(this.basePath + this.modulePath + '/getArrayValue', {'test' : test }, options)
            .map(this.extractData)
            .catch(this.handleError);
            return response;
}

But I am getting errors such as System property [org.owasp.esapi.devteam] is not set

And I read on other posts that I have to stringify the array before passing to backend.

Is there a reason why I need to stringify / also can I just pass the raw array?

EDIT 1 : including backend controller codes

public ResponseEntity<?> getArrayValues( ArrayList<String> test ) {
     logger.debug("@@@ Test if array has a size @@@" + test.size());


}

Apparently size already shows 0 from here.

EDIT 2 :

While debugging, i realised that the SQL at the back is receiving say

HOME CHARACTER(20 OCTETS)

does this make any difference? Like passing of string into octets or do I have to do some conversion?

Sorry if I have alot of questions am also working hard on debugging and learning more about it!

Thanks for the swift actions @DaveyDaveDave ! really appreciate it — Opkko Lim
– Opkko Lim, Commented Oct 8, 2019 at 14:49

varman · Accepted Answer · 2019-10-08 13:03:33Z

2

Most of the developers like JSON data as request and it's good practice in RESTful apis. why?

JSON format is {key1: value1, key2: value 2,....}

You are passing

this.http.post(this.basePath + this.modulePath + '/getArrayValue',{'test' : YOUR_ACTUAL_ARRAY})

form the front-end. The httpClient.post(url,body,options?) has url and body as mandatory. How can you get it in back-end? Since you have body only,

    public ResponseEntity<?> getArrayValues(@RequestBody List<String> test) {    
       // codes
    }

Key of passed parameter from front-end test and variable which listens in back-end should be in same name. Otherwise @RequestBody("KEY_NAME") List<String> any_variable

As you asked from comment, you may have two key value pairs. Eg : { "test" : value1, "tmp": value2}. Assume value1 and value2 both are String array.

this.http.post(this.basePath + this.modulePath + '/getArrayValue',{'myJson' : YOUR_JSON})

There are lot of way(Eg : Gson,ObjectMapper etc). I use another way.

Create a class called TestTmpConverter

class TestTmpConverter{
    List<String> test;
    List<String> tmp;

    //No-argument constructors & Argument constructors
    //Getters
}

In controller

public ResponseEntity<?> getArrayValues(@RequestBody List<TestTmpConverter> myJson ) {
    List<TestTmpConverter> test=myJson.getTest();
    List<TestTmpConverter> tmp=myJson.getTmp();

    // Do your work

}

I only showed one way.There are a lot of way to pass data to back-end like @RequestParam, @PathVariable etc. I feel now you get something how you can pass the data.

answered Oct 8, 2019 at 13:03

varman

8,9226 gold badges25 silver badges56 bronze badges

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

4 Comments

Opkko Lim Over a year ago

Hey varman this is new to me! but nice explaination i needed this, One thing tho, from your method, you are passing in a json object correct? if this is the case where and how do i declare this json object in the ts file?

varman Over a year ago

There are many ways. You can let x={key1:value1,key2:value2} like hard coding. Or define a class/interface with properties. Then set the value to properties which automatically makes as a json object

Opkko Lim Over a year ago

Sorry for the late reply @varman, your comment made me realised how much knowledge i lacked! I will be sure to study more on this. Thanks! although i used a different approach to solve my codes but your comment did help me understand some stuff

varman Over a year ago

With pleasure, wave me if you need any help, as I and you said, there are a lot of method to solve averything. Happy coding

ChrisF · Accepted Answer · 2019-10-10 08:26:21Z

1

For your client put your data directly on POST's body:

public passingOfValues( test : Array<string> ) : Observable<Array<string>> {
    let headers = new Headers({ 'Content-Type': 'application/json'} );
    let options = new RequestOptions({ headers: headers); 

    let response = this.http.post(this.basePath + this.modulePath + '/getArrayValue',
                  test, options)
            .map(this.extractData)
            .catch(this.handleError);
            return response;
}

On your REST service use the @RequestBody annotation:

public ResponseEntity<?> getArrayValues(@RequestBody String[] test ) {
     logger.debug("@@@ Test if array has a size @@@" + test.size());


}

edited Oct 10, 2019 at 8:26

ChrisF

138k31 gold badges265 silver badges335 bronze badges

answered Oct 8, 2019 at 6:58

xcesco

4,8485 gold badges40 silver badges71 bronze badges

8 Comments

Opkko Lim Over a year ago

May i know the difference between putting it directly and within curly braces { } ?

mbojko Over a year ago

The format will be different: without the {}, you'll post [value1, value2, value3], and with them, {"test": [value1, value2, value3]}.

Opkko Lim Over a year ago

@mbojko i will definately test out your suggestion! One more quick question what if my function takes in two values? initially i did { "test" : test, "tmp": tmp} Also, in this cause if test is a string it will become { "test": value} ? and if i do it without curly braces it will be just value

varman Over a year ago

@RequestBody String[] test is possible. For the above question , we can pass only one body inside the post method. So that if we define both varible as A JSON format, we can easily convert the json fromat to both values that you defined test and tmp. Anothe method that you can pass as a parameter along with post method

xcesco Over a year ago

@OpkkoLim using [] means that you pass directly the array. {} means that you are passing an object (in your case, inside the object there is the array).

|

Collectives™ on Stack Overflow

Unable to pass Array from Angular 2 typescript to Spring Java

2 Answers 2

4 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related