Angular POST method send only a JSON array

Question

I have an Angular frontend which communicates with a Spring REST API. The Spring endpoint expects a JSON array, but with Angular HttpClient POST method I don't know how to send only a JSON array. Now I get HTTP error code 400 (Bad request).

What I need to send to the endpoint (this is tested and works in an API tester):

[    
    {
        "date": "2020-05-26T02:00:00.000Z",
        "blocked": false,
        "reservation": null
    },
    {
        "date": "2020-05-27T00:00:00.000Z",
        "blocked": true,
        "reservation": null
    }
]

The way I'm sending the changes now:

modifyElements(id: number, elements: Element[]): Observable<Element[]> {
  return this.http.post<Element[]>(this.baseUrl + '/modify/' + id, elements);
}

The structure of the data that is sent by HttpClient's put method is below:

{
    "0": {
        "date": "2020-05-26T02:00:00.000Z",
        "blocked": false,
        "reservation": null
    },
    "1": {
        "date": "2020-05-27T00:00:00.000Z",
        "blocked": true,
        "reservation": null
    }
}

What I also tried and is closer to what I need:

this.http.post<Element[]>(this.baseUrl + '/modify/' + id, {elements: elements});

What this sends:

"elements": [    
        {
            "date": "2020-05-26T02:00:00.000Z",
            "blocked": false,
            "reservation": null
        },
        {
            "date": "2020-05-27T00:00:00.000Z",
            "blocked": true,
            "reservation": null
        }
    ]

This is still not accepted by the API, results in the same error.

Please help me how can I send the data in the right structure, only a JSON array.

I already know how can I workaround this issue in Spring: in the controller method expecting for a request body of a new class that has just one member which is a collection, but that's not a nice solution.

I would like to know how it can be done without a workaround, on the Angular side.

Edit:

Thank you for the answers so far, but they return the same array I had, with the same structure. The data structures I inserted in the question are the request bodies sent by Angular's HttpClient, copied from Chrome DevTools. I think the problem is not with my original array, but with how HttpClient creates the JSON that it sends. It seems to me that it can't interpret an array as a simple JSON array, and can only send a JSON array as a key-value pair, the value being the JSON array. What I need instead is to get rid of the key and send only the plain value. The question is, can HttpClient do that?

Answer 1

I faced the same problem, and I resolved with:

return this.http.request<ReturnType>(
      'POST',
      URL,
      {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        }),
        body: JSON.stringify(array)
      });

Answer 2

Use this snippet

modifyElements(id: number, elements: Element[]): Observable<Element[]> {
  const elementsArray = Object.assign([], elements);
  return this.http.post<Element[]>(this.baseUrl + '/modify/' + id, elementsArray );
}

This will convert to the required format

var a ={
    "0": {
        "date": "2020-05-26T02:00:00.000Z",
        "blocked": false,
        "reservation": null
    },
    "1": {
        "date": "2020-05-27T00:00:00.000Z",
        "blocked": true,
        "reservation": null
    }
}


var c = Object.assign([], a)
console.log(c)

Answer 3

as I see you have object type [key:value] ,key is index value is an element entity. you have to extract values from this object and then send it to the server

Object.values(elements) //send this