Javascript 如何修复“未捕获的SyntaxError:JSON中位置3处的意外标记%”，以便将数据从Vue传递到Iframe？

我在解码JSON时遇到了一个问题，这有点不同，因为我使用Vue组件将数组传递给iFrame元素。我试着从堆栈的一些答案中提出建议和解决方案，但对我无效

以下是错误：

Uncaught SyntaxError:JSON中位置3处的意外标记%

所以Vue部分：

<iframe :src="getMultipleMarkers()"></iframe>

getMultipleMarkers(){
    var markers = [this.reports];
        console.log(markers[0])
        return `http://127.0.0.1:8000/multipleMarakers.html?reports=${JSON.stringify(markers[0])}`;
}

下面是我在HTML文件中收到的没有
Json.Parse的回复

[{%22id%22:108,%22employe_id%22:4,%22method%22:%22online%22,%22status%22:%22none%22,%22lat%22:31.284921666666666,%22lng%22:48.73399666666666,%22received_date%22:%2205:42:51%20-%201398-09-17%22,%22received_date_original%22:%222019-12-08%2005:42:51%22,%22created_at%22:%2205:42:51%20-%201398-09-17%22,%22created_at_original%22:%222019-12-08%2005:42:51%22},{%22id%22:107,%22employe_id%22:4,%22method%22:%22online%22,%22status%22:%22none%22,%22lat%22:31.284921666666666,%22lng%22:48.73399666666666,%22received_date%22:%2205:37:57%20-%201398-09-17%22,%22received_date_original%22:%222019-12-08%2005:37:57%22,%22created_at%22:%2205:37:57%20-%201398-09-17%22,%22created_at_original%22:%222019-12-08%2005:37:57%22},{%22id%22:106,%22employe_id%22:4,%22method%22:%22online%22,%22status%22:%22none%22,%22lat%22:31.284921666666666,%22lng%22:48.73399666666666,%22received_date%22:%2205:27:58%20-%201398-09-17%22,%22received_date_original%22:%222019-12-08%2005:27:58%22,%22created_at%22:%2205:27:58%20-%201398-09-17%22,%22created_at_original%22:%222019-12-08%2005:27:58%22},{%22id%22:11,%22employe_id%22:4,%22method%22:%22online%22,%22status%22:%22none%22,%22lat%22:31.2849217,%22lng%22:48.7339967,%22received_date%22:%2215:48:18%20-%201398-09-16%22,%22received_date_original%22:%222019-12-07%2015:48:18%22,%22created_at%22:%2215:48:18%20-%201398-09-16%22,%22created_at_original%22:%222019-12-07%2015:48:18%22}]

另外，在这张图片中，我在vue组件和HTML文件中使用了数组，在第一次响应中，您将看到它们是数组，我将此发送到iframe，它将获得带有“%22”个字符的响应。我不知道应该如何解决此问题，或者应该如何将所有这些%22替换为”


以下是索引为0的图片中数组中的数据：

created_at: "05:42:51 - 1398-09-17"
created_at_original: "2019-12-08 05:42:51"
employe_id: 4
id: 108
lat: 31.284921666666666
lng: 48.73399666666666
method: "online"
received_date: "05:42:51 - 1398-09-17"
received_date_original: "2019-12-08 05:42:51"
status: "none"


我还试图用“，”替换%22，但它只是替换了第一个，当我使用map函数时，出现了错误。尝试了新的阵列和其他东西。所以请帮我解决这个问题

编辑01：我在html部分的控制台中得到null

var params = location.href.split('?')[1].split('&');
data = [];
for (x in params)
{
    data[params[x].split('=')[0]] = params[x].split('=')[1];
}
const queryParams = new URLSearchParams(location.search)
const reports = JSON.parse(queryParams.get(data['reports']))

使
getMultipleMarkers
成为计算属性而不是方法。会的。另外，我不知道您为什么要将
此.reports
包装在
markers
数组中，并且只访问
markers[0]
，因此您不妨参考
此.reports


使用

计算：{
iframeSrc（）{
返回`http://127.0.0.1:8000/multipleMarakers.html?reports=${encodeURIComponent（JSON.stringify（this.reports））}`
}
}



请注意，computed属性不像函数那样使用，它是
iframeSrc
而不是
iframeSrc（）


在“Html文件”中，使用
location.search
获取查询字符串并清除键和值。您可以在这里找到一个示例（向下滚动到JavaScript回退部分）

更简单的是（如果你的

const queryParams=新的URLSearchParams（location.search）
const reports=JSON.parse（queryParams.get（'reports'））


@Atlas Pio我已经更新了我的答案。如果是计算属性，则应该使用
：src=“getMultipleMarkers”
，而不是
：src=“getMultipleMarkers（）”
@Atlas Pio I添加了一个用于读取和解码URL查询参数的链接。这对你不起作用吗？不，它起作用了，我犯了个错误，你的解决方案起作用了。我试图理解html部分。看起来你在位置参数中搜索，然后用“reports”获取数据[“reports”]，因为它在url中，所以根据你说的，我可以像这样获取我的数组，而不需要以前的其他方法，对吗？
var params = location.href.split('?')[1].split('&');
data = [];
for (x in params)
{
    data[params[x].split('=')[0]] = params[x].split('=')[1];
}
const queryParams = new URLSearchParams(location.search)
const reports = JSON.parse(queryParams.get(data['reports']))