Win a copy of Functional Reactive Programming this week in the Other Languages forum!
    Bookmark Topic Watch Topic
  • New Topic

Iterating a JSON in jQuery

 
amit punekar
Ranch Hand
Posts: 544
  • Mark post as helpful
  • send pies
  • Report post to moderator
Hi ,
I am trying to do the following
1) In parent HTML have a hidden form field that holds data in JSON format. The example below shows one property value pair per JSON object in an array.
e.g <input type="hidden" id="usethis" value={"items":[{"name":"Item 1"},{"name:"Item 2"}]}/>
2) In the new window which is opened from this parent window, I need to access this hidden field and use the value to populate the SELECT box.

To do this I tried using this in document.ready


This fails to read the JSON array.
Can someone please let me know if there is any inbuilt function other than each to parse the JSON? Or I have to use some third party JS library (listed on json.org) to parse this JSON ?
I am not able to resolve this issue and hence seeking some help here.

Thanks and Regards,
Amit
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65220
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Report post to moderator
amit punekar wrote:This fails to read the JSON array.

Fails how? At what point does the problem begin? Have you debugged to find out if the JSON string is being correctly evaluated in the first place?

Can someone please let me know if there is any inbuilt function other than each to parse the JSON?

$.each() doesn't parse the JSON, eval() does.

Do you understand how JSON works? Once it's evaluated, the result is just a JavaScript data structure like any other.
 
amit punekar
Ranch Hand
Posts: 544
  • Mark post as helpful
  • send pies
  • Report post to moderator
Hi,
thanks once again for your reply.
I did debug using Google Chrome Developer tool.
It showed me error while evaluating the string read from parent window.
I re-checked my JSON string to see if I have extra ":" or quotes. But they look good.

The actual error that Chrome shows me is


Regards,
Amit

Update:
I could get eval working by enclosing the JSON string within brackets.
so the value now looks like

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65220
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Report post to moderator
Well, if the JSON doesn't evaluate correctly, then of course the rest of the script (including the jQueryeach() method) won't work.

Did you check to see if your JSON string is correctly making it to the page. The syntax of your input element is suspect.

Also, in order to eval(), a full and valid expression is needed. Try:

 
amit punekar
Ranch Hand
Posts: 544
  • Mark post as helpful
  • send pies
  • Report post to moderator
Hi Bear,
Thanks for the reply.
Just posted an update to my post and saw your reply.
Did the same to have eval work.
Now looking into iterating it using each funtion.

Another Update:
Got the iteration on JSON working.
Did two mistakes.
1) Did not have enclosing brackets for the JSON String that was passed from parent window to child window.
2) In jQuery.each tried to iterate "data" instead of "data.items" json array. We can iterate on data as well but then we will need to write another iterator function for iterating the only element "items" in it. Hence I preferred to directly iterate over "data.items".

Thanks for your help,
Amit
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65220
95
IntelliJ IDE Java jQuery Mac Mac OS X
 
amit punekar
Ranch Hand
Posts: 544
  • Mark post as helpful
  • send pies
  • Report post to moderator
Hello,
I have implemented an UI based on jQuery event handlers that moves the OPTIONs between two HTML SELECT boxes.

It works great and fine but there is an issue that I have observed.

When the page comes up the double clicking on OPTION does not move the item to another HTML select. After that second double click onwards it starts responding and moving the OPTION items between the two lists.
I have written a JS function to move the items between two list and binding it to the double click event in document.ready() event.

Thanks once again,
Amit
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65220
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Report post to moderator
As this is a completely different issue, I'm going to close this topic and let you open a new one to address this problem. Be sure to include relevant code fragments.
 
    Bookmark Topic Watch Topic
  • New Topic