CODEWITHSUNDEEP
javascriptjquerypythonhtmljson
Nickel
Nickel

Reputation: 533

How can I parse a list of dictionaries into JSON Format using Javascript?

I'm trying to parse a list of dictionaries in JSON format so I can use their data to create a set of list items, where the text and id are generated using this data. I'm passing the following to my web page and stashing it in a hidden div before serving it:

   [{'text': 'org1', 'id': 'org1ID'}, 
    {'text': 'org2', 'id': 'org2ID'}, 
    {'text': 'org3', 'id': 'org3ID'}]

I'm doing it this way because the data can be added to on the client by performing a lookup using ajax and the same ui elements will be able to view different data sets using a subscription based observer-observable model.

Firebug shows it's successfully rendered as:

<div id="selection">[{'text': 'org1', 'id': 'org1ID'}, 
                     {'text': 'org2', 'id': 'org2ID'}, 
                     {'text': 'org3', 'id': 'org3ID'}]</div>

The problem starts when I try a JSON.parse() on the contents of this div. I get back the following message:

JSON.parse: expected property name or '}'

If I remove JSON.parse() I get a list of li elements but with Undefined as values and the number of them doesn't match expected either:

<li id="Undefined">Undefined</> <!-- Repeated a number of times equal to char lengh of div html -->

Please be aware, if the above has not already told you, that I am trying to iterate over my list and extract the information from each dict.

I also tried JSON.stringify() on the data before parsing it but that only seems to convert the data into a string, Looking like this when I step through:

"[{'text': 'org1', 'id': 'org1ID'}, {'text': 'org2', 'id': 'org2ID'}, {'text': 'org3', 'id': 'org3ID'}]" <!-- The difference is that double qoutes have been injected. -->

To make matters even more irritating, for me at least, is that if I actually hard code the associative array part of this data (as Javascript would see it) then it works correctly. However, in order to do this I have to compromise a lot of the flexibility of my current design. The most prominent drawback, aside from more client-side processing, is the inability to just pass my data structure back from the server.

Can anyone out there offer some insight, or perhaps a solution I may have overlooked? Is this a common gotcha with working with JSON in js?

UPDATE

I have discovered that the reason why hard coding works differently is that either python or Jinja2 is converting my data structure to use single quotes instead of double, but entering it on the client bypasses python. At this point, I believe it's python as stepping through on eclipse shows a single quoted list of dicts.

Upvotes: 0

Views: 2907

Answers (1)

Mike Brant
Mike Brant

Reputation: 71384

A valid JSON string directly represents a javascript array/object and doesn't require any parsing at all. Just output this directly to a javascript variable inside script tags:

<script>
var json_array = [{'text': 'org1', 'id': 'org1ID'}, 
    {'text': 'org2', 'id': 'org2ID'}, 
    {'text': 'org3', 'id': 'org3ID'}];
</script>

Your data will automatically be in a javascript array, no need to parse.

Upvotes: 3

Related Questions