jQuery Forum

I have no idea how to parse a detail page from json. Even I can create a detail page, I stuck with some functions. Since I am not a good coder, I would need help...

This is the json I've shorten for this post. Only the the entry with id:421:

1. var species = [{id:"421", recommendation:"A", common_name:"Abalone", source_wild:"1", source_aqua:"0"}];

With help of the JQchain script, I create a item list of all json entries (#species) and a detail page (#thedetails):

1.       $(function(){
2.              $("#species").items(species).chain();
3.              $("#thedetails").items({}).chain();
4.       });

followed by a filter for the list:

1. function filter()
2.       {
3.         $("#species").items("filter", $("#search").val());
4.       }

followed by a click event:

1. function speciesclick(event)
2.       {
3.         var element = (event.target.nodeName == "SPAN") ? event.target.parentNode : event.target;
4.         var reco = $(element).children("span.recommendation").text();
5.         var comm = $(element).children("span.common_name").text();
6.         var sowi = $(element).children("span.source_wild").text();
7.         var soaq = $(element).children("span.source_aqua").text();

followed by a replacer for the detail page:

1. $("#thedetails").item("replace", {common_name:comm, recommendation:reco}).chain();
2.       }

The filter function for the list is not important now, since the filter works perfectly. But here it is:

1.     <form>
2.         <ul class="edit rounded">
3.             <li><input id="search" type="search" name="search" onKeyUp="filter()" placeholder="Search" autocomplete="on"></input></li>
4.         </ul>
5.     </form>

Here the list element I use for my click event. This works so far too. At the moment, I display only "common_name" in my list. But I need to integrate the other details (hidden) because I need them later in the detail page:

1. <li><a onClick="speciesclick(event)" href="#details"><span style="display:none" class="recommendation"></span><span class="common_name"></span><span style="display:none" class="source_wild"></span><span style="display:none" class="source_aqua"></span></a></li>

Now my first problem. My script above creates pure text wrapped in <span>. But I need a dynamically created icon ("recommendation") before the span "common_name". It should look like this:

1. <li><a onClick="speciesclick(event)" href="#details"><img scr="images/icon{recommendation}.png"> <span class="common_name"></span><span style="display:none" class="source_wild"></span><span style="display:none" class="source_aqua"></span></a></li>

So, the browser should render "images/iconA.png" for the json example above. No clue how to code this. I think, var reco = $(element).children("span.recommendation").text(); is wrong for creating an icon dynamically. and also nodeName == "SPAN" can't be the right thing for an icon.

Now, what I have for my detail page:
<div id="thedetails">

1.       <ul>
2.       <li><span class="common_name"></span></li>
3.       </ul>
4.       </div>

This works so far. JQuery does parsing "common_name" correctly.

Problem number two: I also need the icon 'recommendation' infront of the <span>:
<li><img scr="images/icon{recommendation}.png"> <span class="common_name"></span></li>

Problem number three: In additon, I want to add more details from the json database. I try to explain in simple words what I would like to have:

1. IF JSON 'source_wild' = "1" THEN PARSE THIS:
2. <li><img scr="images/icon_wild.png"> Wild Caught Species</li>
3. END IF
4. IF JSON 'source_wild' = "0" THEN PARSE NOTHING

and also an other "ON/OFF SWITCH ":

1. IF JSON 'source_aqua' = "1" THEN PARSE THIS:
2. <li><img scr="images/icon_aqua.png"> Aquaculture Breed</li>
3. END IF
4. IF JSON 'source_aqua' = "0" THEN PARSE NOTHING

I really hope, somebody can help me with this. I know how to do it with SPRY, But my application becomes very slow, since the spry scripts are very big. I can also do it with PHP/MySQL. But the 'product' will be an offline native iPhone app. I really would love to have a json/jquery solution. – A Seafood Guide for WWF Singapore.

Thanks a lot for your support.