如何将字符串化对象添加到 url 的末尾答案

【问题标题】：How to add stringified object to end of url如何将字符串化对象添加到 url 的末尾
【发布时间】：2019-12-22 04:38:36
【问题描述】：

我正在尝试获取一个像这个这样的 json 对象：

filters = {"filters": myArray};

并将其附加到 url 的末尾，使用：

this.router.navigate([`/devices/${productType}/${deviceCategory}/${JSON.stringify(filters)}`]);

无论如何，所以我在其他论坛上读到应该使用 encodeURIComponent ，所以我尝试了以下方法：

this.router.navigate([`/devices/${productType}/${deviceCategory}/${encodeURIComponent(JSON.stringify(filters))}`]);

此时我没有收到错误，但是当我尝试从 params.paramId.filters 获取数据时，我得到未定义，即使我使用 JSON.parse(decodeURIComponent(params.paramId.filters)); 解码或解析它

如何将字符串化对象添加到 url，然后从参数中检索它以继续使用它？

提前谢谢你！

【问题讨论】：

您可能需要考虑将其编码为查询字符串，而不是将 JSON 粘贴在路径段中。

标签： javascript json object ecmascript-6 uri

【解决方案1】：

编码

首先这样做：

const source = new URLSearchParams(filters).toString();

并将其附加到您的网址：

encodeURIComponent(JSON.stringify(source));

解码

这样做：

var search = location.search.substring(1);
var filters = JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g,'","').replace(/=/g,'":"') + '"}');

【讨论】：

【解决方案2】：

我最终做的是，我导入了NavigationExtras，然后：

let navigationExtras: NavigationExtras = {queryParams: {"filters": JSON.stringify(this.searchValues)}};

在我试图将参数附加到链接的函数中，并像这样添加它：

this.router.navigate(['/devices/${this.config.productType.toLowerCase()}/${this.deviceCategory}/${this.displayMode}'], navigationExtras);

我是这样检索的：

this.activatedRoute.queryParams.subscribe(param => { this.finalSearchValues = param["filters"] ? {"Filters": JSON.parse(param["filters"])} : {"filters":[]}; console.log(this.finalSearchValues);});

目前它似乎对我有用。谢谢你们的回答。

【讨论】：