[FIXED] How to Fix `Uncaught SyntaxError: Unexpected token % in JSON at position 3` for Passing data from Vue to Iframe?

Issue

I've got a problem with decoding my JSON which it was kinda different since I'm using Vue Component to pass array to iFrame element. I tried suggestion and solutions from some answer of stack but didn't worked for me.

Here's the error :

Uncaught SyntaxError: Unexpected token % in JSON at position 3

So Vue part :

<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 file :

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']));

And Here's the responses i received in HTML file without 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}]

Also in this picture i've consoled array in vue component and HTML file, which in first response u'll see they array and i'm sending this to iframe which It's getting responses with "%22" characters. i don't know how should i fix this issue or how should i replace all these %22 to ".

Here's the data in array in picture at 0 index:

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"

I also tried to replace %22 with ", but it was only replacing first one, and when i used map function i was getting error. tried new Array and other things. so please help me to fix this issue.

Edit 01 : i'm getting null in console in html part.

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']))

Solution

1. Make getMultipleMarkers a computed property instead of a method. It'll be much more efficient. Also, I have no idea why you're wrapping this.reports in a markers array and only ever accessing markers[0] so you might as well just refer to this.reports.

2. Encode your query parameters properly with encodeURIComponent()

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

   <iframe :src="iframeSrc" />
   

   Note that the computed property is not used like a function ie, it's iframeSrc and not iframeSrc().

3. In your "Html file", use location.search to get at the query string and decodeURIComponent() to clean up the keys and values. You can find an example here ~ https://davidwalsh.name/query-string-javascript (scroll down to the JavaScript Fallback part)

   Even easier is URLSearchParams (if your target browsers support it)

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

Answered By - Phil

Answer Checked By - Clifford M. (PHPFixing Volunteer)