Sending nested objects as a parameter in http.get

Question

I'm trying to send a nested object from my frontend to the backend.
My classes are:

interface ParamsUri {
    iD: number,
    from: string,
    to: string,
    nestedClass: string[]
}

interface Params {
    iD: number,
    from: string,
    to: string,
    nestedClass: NestedClass[]
}

class NestedClass{
    name: string;
    value: string;
}

My http.get command is:

this.http.Get<SomeClass[]>(`api/dashboardfilter`, this.GetParams(paramsUri))

While GetParms is:

private GetParams(params: Parmas): ParamsUri{
        return {
            id: 1,
            from: "temp",
            to: "temp",
            nestedClass: params.nestedClass.map(x => stringify(x))
        }
    }

When console.log(this.GetParams(params).nestedClass, I see what I would expect, i.e., name=XXX&value=YY (one cell of the array). However, when I send the request and follow the query I see that '=' and '&' values were encoded by the get function those the query string is no longer readable to the backend (or at least this is my assumption of why I get null in for those values). I can also confirm that everything other then the nestedclass is received by the backend. I tried other methods to stringify my params (like simple mapping and join) but with no luck.

What am I missing? everywhere I look I find the same answer stringify your nested object, however, this seems to not work as the get function is encoding the stringify string.

Insadrian · Accepted Answer · 2020-11-19 10:04:02Z

1

Is there any reason you're not using a POST request when you're sending data to the backend? Generally you wanna use a GET request only to get data from the backend, and a POST request to send data back to your backend.

this.http.Post<SomeClass[]>(`api/dashboardfilter`, YourObject)

Just pass the object to the post request, and it gets included in the body of your post request.

You might need to specifiy the object structure on the backend aswell, depending on your framework.

EDIT: Saw you tagged C#, so im assuming you're using .netcore or similar. In your controller file specify that the request is a post request and that it has your object in the body.

    [HttpPost]
    public IActionResult YourAction([FromBody] YourObject)
    {
        return Ok(SomeService.SomeFunction(YourObject));
    }

answered Nov 19, 2020 at 10:04

Insadrian

841 silver badge3 bronze badges

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

3 Comments

Liron Levy Over a year ago

This is a good question :) basically, it is a get request as I'm asking for data from the backend (although I send quite a bit of data indeed). Let me explain, This request basically sends to the backend data in order for the backend to know what to send back. I have a selection tree in the frontend which is used as a filter for my page results, so I'm basically sending the checked items to the backend in order for it to send me the filtered data from my DB. Does this makes sense? or do you still thinks this should be a post request?

Insadrian Over a year ago

For convience i would properably just use a post in this case. Do note however, this is not according to the RESTful standard. And if a users uses the backkey he/she will get the alert prompt "This will resend some information" The other option is to restructure your object structure to be flat, which is more correct

Liron Levy Over a year ago

I see I will probably go to the flat approach, I was hoping there is other way around it.

Collectives™ on Stack Overflow

Sending nested objects as a parameter in http.get

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related