Json parsing error

  • Resolved vdhooft

    (@vdhooft)


    4 years, 5 months ago

    I have a small problem with using double quotes in my text.
    When they are used the map is not displayed and I get the following error:
    SyntaxError: JSON.parse: expected ‘,’ or ‘}’ after property value in object at line 1 column 3178 of the JSON data travelersmap.js:208:25
    After a little debugging I found that this is due to the double quotes that are in the excerpt, and thus mess up the JSON somehow.

    I looked at several solutions: Choosing the option not to show the excerpt text, but this does not help. Changing the double quotes in the blog text to single quotes, so they are not in the excerpt any more. This works, but as multiple people write posts this is not a convenient way.
    I have looked if it is possible to sanitize the excerpt before it is used, but I did not find a way there. As a temporary solution, I have made a small change to the code:
    travelers-map/includes/public/cttm-shortcode.php
    Around line 238:

    
// $cttm_postdatas['excerpt'] = get_the_excerpt($cttm_post->ID);
    $cttm_postdatas['excerpt'] = "";

    This helps, and the map displays fine now. But I do not want to make changes to the plugin. Is there another way that I missed, or is this something you can solve in the plugin?

    Many thanks,

    Alex

    • This topic was modified 4 years, 5 months ago by vdhooft.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Camille V

    (@socrapop)

    Dear Alex,

    I can’t reproduce this bug on my dev environment, I think something might be wrong with your theme charset not set to UTF-8.

    Could you inspect your page and tell me the value of the meta tag in the <head> tag ? (top of the code).
    It should be something like:
    <meta charset="UTF-8">

    Also, do you use Word and then copy/paste the content? Word is annoying and uses different unicode characters for some symboles like quotes. That could be the problem too. I will search on my end how to help you with that.

    EDIT: Also, you could look into your wp-config.php file in the root of your website, to check the charset (however, do not change this if you don’t want to destroy your website): define( 'DB_CHARSET', 'utf8mb4' );

    • This reply was modified 4 years, 5 months ago by Camille V.
    Thread Starter vdhooft

    (@vdhooft)

    I use UTF-8, so that can not be the issue.
    I know that very often word content is being copied into Gutenberg text blocks, and word often uses curly quotes. For this reason, I use a plugin “Smart Quote Fixer” (Plugin for fixing smart quotes and other symbols from MS Word before it goes into the database).

    I did some further debugging. I added a console.log in travelersmap.js, just after the “json_cttm_metas.replace” and before the “JSON.parse”. Than I get the json.
    The error I get is:
    SyntaxError: JSON.parse: expected ‘,’ or ‘}’ after property value in object at line 1 column 4676 of the JSON data travelersmap.js:209:25 (some more content is added since the first post).

    When I go to 4676 I see this:

    “excerpt”:”Overland Park is located in Johnson County, it is a beautiful city and a good spot for families. This city topped the list of “Top 10 Best Cities for Families””}},{“markerdatas”:”{\”latitude\”:\”33.43073\”,\”longitude\”:\”-79.
    I copied some more. You can see that the problem is with “Top 10 Best Cities for Families”.

    When I go to the post and look at the HTML (standard Gutenberg text block) I see this:

    <p>Overland Park is located in Johnson County, it is a beautiful city and a good spot for families. This city topped the list of “Top 10 Best Cities for Families” in 2015. It has always had a positive reputation in American Media as an amazing city to work, live, and play. The city is densely populated, with many attractions that one can explore during their stay. This city definitely won’t be a disappointment.</p>

    So the HTML and the excerpt in the JSON match.
    When I change the double quotes for single quotes in the text the problem is not there.

    My wp-config.php contains this: define( 'DB_CHARSET', 'utf8mb4' );

    I hope this helps to find why.

    • This reply was modified 4 years, 5 months ago by vdhooft.
    Plugin Author Camille V

    (@socrapop)

    Thank you for all the informations, It’s nice to see someone with knowledge helping with issues like this ??

    We are almost there!

    The problem lies in the JSON, the double quotes in your excerpts are not escaped like this \".

    At first, I thought it was caused by Smart Quote Fixer.

    I tested to reproduce the same thing without your plugin, I tried to insert test" with ? ? ? abc ? d ? ‘ as a test, but the returning JSON looks like this:
    "excerpt":"test\" with \u00ab \u00ab \u00ab abc \u00bb d \u00ab \u2018" So no problem.

    However, if I try with: &quot; lol &quot; &quot;, the frontend breaks and my JSON is excerpt":"" lol " ""

    So Smart Quote Fixer is responsible in a way, for replacing everything with &quot;, but that’s not the expected behaviours of my plugin, I want it to work with &quot;

    Next, I looked into the json_cttm_metas = json_cttm_metas.replace(/&quot;/g, '"');. It’s not doing anything because the JSON doesn’t include the &quot; in the first place. Moreover, I think my code is wrong, I should replace &quot; by an escaped double quote (I will fix that too).

    So, I thought the problem lies in my PHP, JSON conversion might be broken. But I var_dump‘ed the JSON sent, and I got "excerpt":"&quot; lol &quot; &quot;". So this is the expected JSON…

    Ok, so It’s not my PHP code.

    After that, I went aaaaall the way top in travelersmap.js, and console.logged the raw JSON data, without any modification, and guess what:
    /&quot;/ are already replaced by non-escaped "

    To conclude, the only possible thing causing this is wp_localize_script(), which is the WordPress PHP function to send JS object to the frontend. It was first intended to send translations data, but it is now mostly used as a bridge between PHP and JS for sending JSON data by theme and plugin developers.

    I must go, but I will continue to search on this issue, and try to find a solution. I think I should replace &quot; in the PHP with something else before sending the data.

    Have a nice day !

    • This reply was modified 4 years, 5 months ago by Camille V.
    Plugin Author Camille V

    (@socrapop)

    Ok, I got it, but I did not test everything yet.
    In cttm_shortcode.php, line 253, change:

    //json_encode the array to send it to our javascript
//$cttm_metas = json_encode($cttm_metas);
$cttm_metas = htmlspecialchars(json_encode($cttm_metas));

    Then, in travelers-map.js, comment line 205:
    //json_cttm_metas = json_cttm_metas.replace(/&quot;/g, '"');

    It should work now ??
    I’m testing everything and reviewing my code, and I will update the plugin officially.

    Thread Starter vdhooft

    (@vdhooft)

    That did it!
    It’s working fine now.
    Many thanks for your help.. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Json parsing error’ is closed to new replies.