时间戳

首页 > 解决方案 > Angular POST 方法只发送一个 JSON 数组

json - Angular POST 方法只发送一个 JSON 数组

问题描述

我有一个与 Spring REST API 通信的 Angular 前端。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 能做到吗？

标签： jsonangularpostangular-httpclient

解决方案

使用这个片段

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)

推荐阅读