Post multidimensional array (string[][]) in angular using HttpClient / HttpParams

Question

I'm having trouble finding guidance on the best-practice way to do this with angular (2+). Angular's HttpClient's post function has an HttpParams parameter. HttpParams is a key/value map of type [param: string]: string | string[]. But, I need to post a multidimensional array (2D) parameter (string[][]). i.e.

this.http.post(url, {}, {
    params: {
        2d: [ [ 'arr1' ], [ 'arr2' ] ]
    }
});

But this does not seem to be supported by angular's HttpParams class. While searching around other questions, I found out that

this is possible in angularJS using the same Content-Type that angular uses (application/x-www-form-urlencoded).
this is possible without a framework in vanilla js, but you must encode your multidimensional array on the client side

I'm wondering if there is a clean way to do this in angular. If there is not, why did angular make this design decision and what is a workaround?

do you really need to pass that matrix as query params? why not send it in the request body? — Jota.Toledo
– Jota.Toledo, Commented Mar 31, 2018 at 12:37

David · Accepted Answer · 2018-03-31 09:06:36Z

1

Can you just send it as a json array?

let data= [
    ["string1","string2"],
    ["string3", "string4"]
 ];


let body= {
 content: data
};

this.http.post(url, body)

answered Mar 31, 2018 at 9:06

David

34.6k13 gold badges90 silver badges124 bronze badges

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

Comments

Corey Cole · Accepted Answer · 2018-04-02 21:35:00Z

Thanks to @Jota.Toledo, @David and this question on "Is there any difference between using request.body or request.params", my main misunderstanding was trying to use HttpParams for everything and ignoring the request body. The best solution to my problem is to simply pass the multidimensional array in the request body.

This is the "best-practice" way for a few reasons

The request body doesn't have any restrictions on the complexity of the data (type "any" in the angular docs)
Using the body doesn't encode the data in the url, this avoids a potential status 414 (Request-URI Too Long) if too much data is passed
Following a RESTful pattern, you generally use params for GET requests and the body for POST requests (Stack Overflow question source)

Collectives™ on Stack Overflow

Post multidimensional array (string[][]) in angular using HttpClient / HttpParams

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related