javascript - 如何修复 `Uncaught SyntaxError: Unexpected token % in JSON at position 3` 以将数据从 Vue 传递到 Iframe？

Question

我在解码我的 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 文件:

var params = location.href.split('?')[1].split('&');
data = [];
for (x in params)
{
    data[params[x].split('=')[0]] = params[x].split('=')[1];
}

console.log(JSON.parse(data['reports']));

这是我在没有 Json.Parse

的 HTML 文件中收到的响应

[{%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']))

Answer 1

1. 使 getMultipleMarkers 成为计算属性而不是方法。它将是 much more efficient .另外，我不知道为什么要将 this.reports 包装在 markers 数组中并且只访问 markers[0] 所以你可能以及仅引用 this.reports。

2. 使用 encodeURIComponent() 正确编码您的查询参数

   computed: {
     iframeSrc () {
       return `http://127.0.0.1:8000/multipleMarakers.html?reports=${encodeURIComponent(JSON.stringify(this.reports))}`
     }
   }
   

   <iframe :src="iframeSrc" />
   

   请注意，计算属性不像函数一样使用，即它是iframeSrc 而不是iframeSrc()。

3. 在您的 “Html 文件” 中，使用 location.search 获取查询字符串和 decodeURIComponent()清理键和值。你可以在这里找到一个例子 ~ https://davidwalsh.name/query-string-javascript (向下滚动到 JavaScript Fallback 部分)

   更简单的是 URLSearchParams (如果你的 target browsers support it )

   const queryParams = new URLSearchParams(location.search)
   const reports = JSON.parse(queryParams.get('reports'))