Search code examples
javascriptjqueryjsonstringify

JSON.parse and JSON.stringify error on special character in string

console.log(JSON.stringify($('.btn').attr('data-obj')))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-info user_action" data-action="edit_faqs" data-obj="{SysID:2,Artist:Json Mras,Song:I'm yours}" data-toggle="modal " data-target="#SongsModal
  "><i class="fa fa-edit "></i> Edit</button>

I found this but this is a little different in my case.

When I tried using JSON.stringify on the data I can see in the dev tools

//I want I'm Yours
"{\"Song\":\"I"

The data is stored in my database and I get it in ajax request and I want to use JSON.stringify to it because I will put it as a data-* on a button which will then be used when I click the button. On button click I want to use JSON.parse so I can iterate over it.

How to escape all special characters in JSON.stringify and JSON.parse

Error is:

Uncaught SyntaxError: Unexpected end of JSON input

That points to the JSON.stringify

enter image description here

Added a snippet but it didnt recreate problem so I added an image

Database:

enter image description here

Update:

I get the data from ajax request. After getting the data I use data_array = JSON.stringify(data[i]); then apply the data as data-obj='" + data_array + "'

Solution

  • That's not a problem with JSON, it's a problem with your misuse of HTML.

    You inserted a raw string into a HTML attribute, probably from a template, possibly by doing something like

    <button data-obj="<?php echo json_encode($data); ?>">

    Or possibly in JavaScript

    container.innerHTML = '<button data-obj="' + JSON.stringify(data) + '">';

    so your quotes end up clashing with HTML's. You need to change your quotes into HTML entities; the minimum is changing double quotes " into &quot; if you are using double quotes around the HTML attribute (the most common scenario).

    You have not told us how you insert the content into the HTML, so I can't tell you how to do it until you do clarify.

    EDIT: Apparently you are building HTML in JavaScript by concatenation. In that case, the solution I showed would work:

    container.innerHTML = '<button data-obj="' + data_array.replace(/"/g, '&quot;') + '">';

    Or, if you're using single quotes to enclose the attribute (not commonly done, but certainly an option), you would need to change those to &apos; instead:

    container.innerHTML = "<button data-obj='" + data_array.replace(/'/g, '&apos;') + "'>";

    However, given that it's JavaScript we're talking about, and it can work with DOM, and DOM knows what's what... there's many other solutions. The most primitive one is to work with DOM directly:

    let button = document.createElement('button');
button.setAttribute('data-obj', data_array);
container.appendChild(button);

    When you do this, JavaScript manipulates the DOM directly, not HTML, so escaping is not needed.

    A level above this would be to use a library like jQuery:

    $('<button>').data('obj', data_array).appendTo('#container');

    A level yet above that would be to use a library that employs data binding, like Angular, React, Vue, Ractive... where you would just set the value on your model, and the document automagically reflects that change.

    Changing manually " into &quot; is only needed if you directly manipulate HTML.