Angular POST方法仅发送JSON数组

Question

Angular POST方法仅发送JSON数组

3

我有一个Angular前端，它与Spring REST API通信。Spring端点期望一个JSON数组，但使用Angular HttpClient POST方法时，我不知道如何仅发送JSON数组。现在我得到了HTTP错误代码400（错误请求）。

我需要发送到端点的内容（在API测试器中测试并可以正常工作）：

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

我现在发送更改的方式是：

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

HttpClient的put方法发送的数据结构如下：

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

我尝试过的方法更接近我需要的内容：

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

这发送了什么：

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

这个仍然没有被API接受，导致了同样的错误。

请帮我想办法如何以正确的结构发送数据，只有一个JSON数组。

我已经知道了如何在Spring中解决此问题：在控制器方法中需要一个新类的请求体，该类只有一个成员是集合，但这不是一个好的解决方案。

我想知道如何在Angular端不使用解决方法来解决它。

编辑：

感谢迄今为止的答案，但它们返回与我拥有的相同结构的同一数组。我在问题中插入了数据结构，这些数据结构是由Angular的HttpClient发送的请求正文，从Chrome DevTools复制而来。我认为问题不在于我的原始数组，而是在于HttpClient创建要发送的JSON的方式。在我看来，它不能将数组解释为简单的JSON数组，并且只能将JSON数组作为键值对发送，其中值是JSON数组。相反，我需要摆脱键并仅发送纯值。 问题是，HttpClient能做到吗？

- Balazs Szanto

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maykon Oliveira · Answer 1

我遇到了同样的问题，我用以下方法解决了：

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

- Shlok Nangia · Answer 2

使用这段代码

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

这将转换为所需的格式

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)

- onik · Answer 3

我看到你有一个对象类型 [key:value]，key 是索引值，value 是一个元素实体。你需要从这个对象中提取值，然后发送到服务器。

Object.values(elements) //send this