JSON stringified string breaks inside the data attribute when has a space separated value

Question

 var dataObj=  {
      "Cast_Code": "NA",
      "Mat_Code": "xxxx",
      "Pin_Num": "xxxx",
      "MatDetail": [
        {
          "Batch_Number": "Patch PA",
          "Batch_Expiry": "No Expiry",
          "Batch_Quantity": "xxx",
          "Return_Qty": "0.00"
        }
      ]
    }

I am trying to assign the above object as an attribute to an element like this:

content +='<div class="save_data" data-savereturn='+JSON.stringify(dataObj)+'></div>';

But on viewing the source it appears in the HTML like:

<div class="save_return" data-savereturn="{"Cast_Code": "NA",...,
      "MatDetail": [
        {                //Notice the double quote between "Patch PA"
          "Batch_Number": "Patch" pa","batch_expiry": "no expiry","batch_quantity": "xxx","return_qty": "0.00""
        }
      ]
    }"></div>

I further tried

console.log(JSON.stringify(dataObj));

which logs the output correct without being broken by the double quote as in the case of assigning it to the data-savereturn.

This dataObj gets created in a jQuery.each loop which is then assigned to corresponding HTML elements.

Unable to figure out the breaking of JSON which is truncating & lowercasing of the portion after the space.

It doesn't happens when the word has no space in between i.e

"Batch_Number": "PatchPA",

Update:

on start quotes double (")

content +='<div class="save_data" data-savereturn="'+JSON.stringify(dataObj)+'"></div>';

    
    it shows:

    <div class="save_return" data-savereturn="{" Cast_Code":"na","Mat_Code":"xyz","Pin_Num":"xyz","batchdetail":[{"batch_number":"patch="" na","batch_expiry":"no="" expiry","batch_quantity":"20","return_qty":"0.00"}]}"=""></div>

    jQuery('.selector').data('savereturn')
     gives
    {
      "savereturn": "{"
    }
    which gives an error on JSON.parse "Uncaught SyntaxError: Unexpected end of JSON input"

changed the start quotes to single (')

     content +="<div class='save_data' data-savereturn='"+JSON.stringify(dataObj)+"'></div>";
    
        <div class="save_return" data-savereturn="{"Request_Code":"NA";"Mat_Code":"xx";"In_num":"xx","BatchDetail":[{"Batch_Number":"Batch NA","Batch_Expiry":"No Expiry","Batch_Quantity":"10","Return_Qty":"0.00"}]}"></div>

jQuery('sel').data('savereturn') gives:
{
  "Cast_Code": "NA",
  "Mat_Code": "tttt",
  "Tin_Number": "ppp",
  "PatchDetail": [
    {
      "Batch_Number": "Patch NA",
      "Batch_Expiry": "No Expiry",
      "Batch_Quantity": "10",
      "Return_Qty": "0.00"
    }
  ]
}
which also give error on JSON.parse

Uncaught SyntaxError: Unexpected token o in JSON at position 1

2nd one looks correct but still having JSON invalid.

content +='<div class="save_data" data-savereturn="'+JSON.stringify(dataObj)+'"></div>'; — Callam
– Callam, Commented Jul 13, 2018 at 19:19
<div class="save_data" data-savereturn="${JSON.stringify(dataObj).replace(/"/g, '\\"')}"></div> — Callam
– Callam, Commented Jul 13, 2018 at 19:30
For me this worked better JSON.stringify(dataObj).replace(/"/g, '"') — Daniel Bailey
– Daniel Bailey, Commented Jun 18, 2019 at 15:15

Barmar · Accepted Answer · 2023-09-05 18:54:44Z

5

You need to put quotes around an attribute that contains spaces, as well as some other punctuation characters, so it's best to always quote your attributes. Since the JSON will contain double quotes, you should use single quotes around the attribute.

content +="<div class='save_data' data-savereturn='"+JSON.stringify(dataObj)+"'></div>";

Note that this won't work properly if there are any single quotes in dataObj; they won't be encoded to prevent from terminating the data-savereturn attribute.

If you're using jQuery, it would be easier IMO to create the element like this:

var element = $("<div>", {
    "class": "save_data",
    data: { "savereturn": dataObj }
});

and this also solves that problem. In plain JavaScript this would be:

let element = document.createElement("div");
element.classList.add("save_data");
element.datalist.savereturn = JSON.stringify(dataObj);

edited Sep 5, 2023 at 18:54

answered Jul 13, 2018 at 19:24

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

techie_28 Over a year ago

would this approach concatenate on an already running string variable like content +=?

Barmar Over a year ago

If you use this approach you would generally use .append() to add the element to a DIV, rather than dealing with HTML strings.

techie_28 Over a year ago

Actually content contains whole html of page appended into it over several loops and conditions and this is needed to be attached along.This is then assigned to a central div by using .html() method of jQuery.Dont know if it is the right approach but it is an ongoing thing so little chance to change that.

Barmar Over a year ago

Then use the first part of the answer.

Barmar Over a year ago

There are pros and cons. Constructing the HTML string and inserting it into the DOM at the end is fast. But you can run into problems if you're not careful about the syntax. When you're inserting complex data like JSON, the latter could be an issue.

|

Nicanor Júnior · Accepted Answer · 2023-09-05 01:30:30Z

-2

This topic is too old, but I think others like me would come across the same issue while stringify some object that contains a value whith spaces.

A possible approach to deal this problem is to replace the value with space by ' ', a "non-breaking space" special char code like this:

var Batch_Number = value_from_somewhere.replace(" ", ' ');

answered Sep 5, 2023 at 1:30

Nicanor Júnior

11 bronze badge

2 Comments

Bergi Over a year ago

That's a really bad idea. It messes with the data in absolutely unexpected ways.

Data_Is_Everything Over a year ago

no such thing as non breaking space... just empty space.

Collectives™ on Stack Overflow

JSON stringified string breaks inside the data attribute when has a space separated value

2 Answers 2

12 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related