jQuery parse string data

Question

My simulation results are acquired from REST service which contains strings and numerical values. I am able to parse the numerical ones (x_water), but have difficulties with the strings (x_date). Below is my approach, and I guess maybe I am wrong in using HTML5 data-val attribute to store strings. So could anyone gives me some suggestions?

My data looks like below

x_water

[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 22.1, 0.0545, 0.000171, 3.71e-05, 3.61e-05, 3.54e-05, 3.48e-05, 3.42e-05, 3.35e-05, 3.3e-05, 3.24e-05, 3.18e-05, 3.12e-05, 3.06e-05, 3.01e-05, 2.95e-05, 2.9e-05, 2.85e-05, 2.79e-05, 2.74e-05, 2.69e-05, 2.64e-05, 2.59e-05, 2.54e-05, 2.5e-05, 2.45e-05, 2.41e-05, 2.36e-05, 2.32e-05, 2.28e-05, 2.23e-05, 2.19e-05]

x_date

[' 1/ 1/1961', ' 1/ 2/1961', ' 1/ 3/1961', ' 1/ 4/1961', ' 1/ 5/1961', ' 1/ 6/1961', ' 1/ 7/1961', ' 1/ 8/1961', ' 1/ 9/1961', ' 1/10/1961', ' 1/11/1961', ' 1/12/1961', ' 1/13/1961', ' 1/14/1961', ' 1/15/1961', ' 1/16/1961', ' 1/17/1961', ' 1/18/1961', ' 1/19/1961', ' 1/20/1961', ' 1/21/1961', ' 1/22/1961', ' 1/23/1961', ' 1/24/1961', ' 1/25/1961', ' 1/26/1961', ' 1/27/1961', ' 1/28/1961', ' 1/29/1961', ' 1/30/1961', ' 1/31/1961', ' 2/ 1/1961', ' 2/ 2/1961', ' 2/ 3/1961', ' 2/ 4/1961', ' 2/ 5/1961', ' 2/ 6/1961', ' 2/ 7/1961', ' 2/ 8/1961', ' 2/ 9/1961', ' 2/10/1961', ' 2/11/1961', ' 2/12/1961']

In python, I put them in a hidden html table like below:

html = html + """
<table class="results" width="550" border="1">
                  <tr>
                    <th scope="col" colspan="3"><div align="center">Results</div></th>
                  </tr>
                  <tr style="display: none">
                    <td id="x_water" data-val='%s'></td>
                    <td id="x_date" data-val='%s'></td>
                  </tr>
</table><br>"""%(x_water,x_date)

The last step is use jQuery to grab those two variables:

    var x_water = $.parseJSON($('#x_water').attr('data-val'));
    var x_date = $.parseJSON($('#x_date').attr('data-val'));

I checked the source of the generated html file:

<td id="x_water" data-val='[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 22.1, 0.0545, 0.000171, 3.71e-05, 3.61e-05, 3.54e-05, 3.48e-05, 3.42e-05, 3.35e-05, 3.3e-05, 3.24e-05, 3.18e-05, 3.12e-05, 3.06e-05, 3.01e-05, 2.95e-05, 2.9e-05, 2.85e-05, 2.79e-05, 2.74e-05, 2.69e-05, 2.64e-05, 2.59e-05, 2.54e-05, 2.5e-05, 2.45e-05, 2.41e-05, 2.36e-05, 2.32e-05, 2.28e-05, 2.23e-05, 2.19e-05]'></td>
<td id="x_date" data-val='[' 1/ 1/1961', ' 1/ 2/1961', ' 1/ 3/1961', ' 1/ 4/1961', ' 1/ 5/1961', ' 1/ 6/1961', ' 1/ 7/1961', ' 1/ 8/1961', ' 1/ 9/1961', ' 1/10/1961', ' 1/11/1961', ' 1/12/1961', ' 1/13/1961', ' 1/14/1961', ' 1/15/1961', ' 1/16/1961', ' 1/17/1961', ' 1/18/1961', ' 1/19/1961', ' 1/20/1961', ' 1/21/1961', ' 1/22/1961', ' 1/23/1961', ' 1/24/1961', ' 1/25/1961', ' 1/26/1961', ' 1/27/1961', ' 1/28/1961', ' 1/29/1961', ' 1/30/1961', ' 1/31/1961', ' 2/ 1/1961', ' 2/ 2/1961', ' 2/ 3/1961', ' 2/ 4/1961', ' 2/ 5/1961', ' 2/ 6/1961', ' 2/ 7/1961', ' 2/ 8/1961', ' 2/ 9/1961', ' 2/10/1961', ' 2/11/1961', ' 2/12/1961']'></td>

My Chrome JS console did not help a lot, but only complains:

Uncaught SyntaxError: Unexpected end of input

You should probably pass valid JSON to a function that parses JSON ? — adeneo
– adeneo, Commented Mar 14, 2013 at 22:35
You are right. I need to convert x_date using json.dump first. — TTT
– TTT, Commented Mar 15, 2013 at 3:33

Community · Accepted Answer · 2017-05-23 10:32:03Z

Your quotes are not properly escaped. Check this page out

How to properly escape quotes inside html attributes?

Also here is a fiddle of the correct use in action

http://jsfiddle.net/earlonrails/LUDh8/3/

<td id="x_water" data-val='[0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 22.1, 0.0545, 0.000171, 3.71e-05, 3.61e-05, 3.54e-05, 3.48e-05, 3.42e-05, 3.35e-05, 3.3e-05, 3.24e-05, 3.18e-05, 3.12e-05, 3.06e-05, 3.01e-05, 2.95e-05, 2.9e-05, 2.85e-05, 2.79e-05, 2.74e-05, 2.69e-05, 2.64e-05, 2.59e-05, 2.54e-05, 2.5e-05, 2.45e-05, 2.41e-05, 2.36e-05, 2.32e-05, 2.28e-05, 2.23e-05, 2.19e-05]'></td>
<td id="x_date" data-val="[ &quot;1/ 1/1961&quot;, &quot; 1/ 2/1961&quot;, &quot; 1/ 3/1961&quot;, &quot; 1/ 4/1961&quot;, &quot; 1/ 5/1961&quot;, &quot; 1/ 6/1961&quot;, &quot; 1/ 7/1961&quot;, &quot; 1/ 8/1961&quot;, &quot; 1/ 9/1961&quot;, &quot; 1/10/1961&quot;, &quot; 1/11/1961&quot;, &quot; 1/12/1961&quot;, &quot; 1/13/1961&quot;, &quot; 1/14/1961&quot;, &quot; 1/15/1961&quot;, &quot; 1/16/1961&quot;, &quot; 1/17/1961&quot;, &quot; 1/18/1961&quot;, &quot; 1/19/1961&quot;, &quot; 1/20/1961&quot;, &quot; 1/21/1961&quot;, &quot; 1/22/1961&quot;, &quot; 1/23/1961&quot;, &quot; 1/24/1961&quot;, &quot; 1/25/1961&quot;, &quot; 1/26/1961&quot;, &quot; 1/27/1961&quot;, &quot; 1/28/1961&quot;, &quot; 1/29/1961&quot;, &quot; 1/30/1961&quot;, &quot; 1/31/1961&quot;, &quot; 2/ 1/1961&quot;, &quot; 2/ 2/1961&quot;, &quot; 2/ 3/1961&quot;, &quot; 2/ 4/1961&quot;, &quot; 2/ 5/1961&quot;, &quot; 2/ 6/1961&quot;, &quot; 2/ 7/1961&quot;, &quot; 2/ 8/1961&quot;, &quot; 2/ 9/1961&quot;, &quot; 2/10/1961&quot;, &quot; 2/11/1961&quot;, &quot; 2/12/1961&quot;]"></td>

This is why you got the error, and I believe it to be the correct answer.

Mike Brant · Accepted Answer · 2013-03-14 22:39:32Z

0

If you know the data at page load time, I would suggest simply outputting it directly in javascript as an object literal:

html = html + """
<script type="javascript">
var x_water = %s;
var x_date = %s;
</script>"""%(x_water,x_date);

answered Mar 14, 2013 at 22:39

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

1 Comment

TTT Over a year ago

Will this approach slow down the webpage speed?

Collectives™ on Stack Overflow

jQuery parse string data

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related