CODEWITHSUNDEEP
javascriptjquery
bsr
bsr

Reputation: 58662

Store JSON string in input field value

How to store Json string in a hidden input field. Well, I could do it programmatically, but something wrong with escaping. Since my string is moderately long, it is hard to escape " char for all the names. Please explain how it works programmatically (phase 1), as the console output looks same.

[{"X":0,"Y":0,"W":0,"H":500},{"X":358,"Y":62,"W":200,"H":500}]test2.html:21 [{"X":0,"Y":0,"W":0,"H":500},{"X":358,"Y":62,"W":200,"H":500}] test2.html:22 PASSED PHASE 1
jquery.min.js:16Uncaught SyntaxError: Unexpected end of input

thanks,

bsr.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
        <input type="hidden" id="jsondata" />
        <input type="hidden" id="jsondata2" value="[{"X":0,"Y":0,"W":0,"H":500},{"X":358,"Y":62,"W":200,"H":500}]"/>


    <script >
            $(document).ready(function() {  

            myItems = [{"X":0,"Y":0,"W":0,"H":500},
                   {"X":358,"Y":62,"W":200,"H":500}]

            console.log(JSON.stringify(myItems));
            $("#jsondata").val(JSON.stringify(myItems));
            console.log(document.getElementById("jsondata").value);
            console.log("PASSED PHASE 1");

            var obj = jQuery.parseJSON($("#jsondata2").val());
            console.log(obj.length);    
            console.log("PASSED PHASE 2");           
        }); 
    </script>
</body>
</html>

Edit:

the following code works.. not sure whether it is correct. so will mark a good explanation as answer. thanks.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
        <input type="hidden" id="jsondata" />
        <input type="hidden" id="jsondata2" value='[{"X":0,"Y":0,"W":0,"H":500},{"X":358,"Y":62,"W":200,"H":500}]'/>


    <script >
            $(document).ready(function() {  

            myItems = [{"X":0,"Y":0,"W":0,"H":500},
                   {"X":358,"Y":62,"W":200,"H":500}]

            console.log(JSON.stringify(myItems));
            $("#jsondata").val(JSON.stringify(myItems));
            console.log(document.getElementById("jsondata").value);
            console.log("PASSED PHASE 1");

            var obj = jQuery.parseJSON($("#jsondata2").val());
            console.log($("#jsondata2").val()); 
            console.log(obj[0].H);  
            console.log("PASSED PHASE 2");           
        }); 
    </script>
</body>
</html>

Upvotes: 15

Views: 64514

Answers (5)

ratchet freak
ratchet freak

Reputation: 48196

<input type="hidden" id="jsondata2" value="[{"X":0,"Y":0,"W":0,"H":500},{"X":358,"Y":62,"W":200,"H":500}]"/>

is not correct. Use single quotes ' instead of the double quotes " in the value string to fix it (or escape the ")

<input type="hidden" id="jsondata2" value="[{'X':0,'Y':0,'W':0,'H':500},{'X':358,'Y':62,'W':200,'H':500}]"/>

Upvotes: 8

guaph
guaph

Reputation: 151

You can do something like this, but it's pretty bad, HTML :

<textarea id="jsondata" sytle="display:none"></textarea>

and JS

$(function(){

    var myItems = [{"X":0,"Y":0,"W":0,"H":500}, {"X":358,"Y":62,"W":200,"H":500}]

    $("#jsondata").val(JSON.stringify(myItems));

});

Upvotes: 12

rbawaskar
rbawaskar

Reputation: 1045

The html markup is invalid ... if you run html validator againt the first html (non working one) you will find errors on the line...

Upvotes: 4

gaRex
gaRex

Reputation: 4215

See answer about quotes.

Reason is simple -- when you have this code:

[sometag someattr="qwerty"123":cxzcxz"/]

browser understands it as:

[sometag someattr="qwerty"/]

And last part (123":cxzcxz") just throwing off as a junk. So for your concrete case parseJSON tries to work with just this:

[{

But you think it`s a full string like:

[{"X":0,"Y":0,"W":0,"H":500},{"X":358,"Y":62,"W":200,"H":500}]

So better you should encode your json before putting in a value of hidden field on server side.

Upvotes: 2

Hogan
Hogan

Reputation: 70523

Try the code below, it looks like you have an array not an object to me.

 myItems = { data : [{"X":0,"Y":0,"W":0,"H":500},
                     {"X":358,"Y":62,"W":200,"H":500}] };

Upvotes: 0

Related Questions