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:
- 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):
- $(function(){
- $("#species").items(species).chain();
- $("#thedetails").items({}).chain();
- });
followed by a filter for the list:
- function filter()
- {
- $("#species").items("filter", $("#search").val());
- }
followed by a click event:
- function speciesclick(event)
- {
- var element = (event.target.nodeName == "SPAN") ? event.target.parentNode : event.target;
- var reco = $(element).children("span.recommendation").text();
- var comm = $(element).children("span.common_name").text();
- var sowi = $(element).children("span.source_wild").text();
- var soaq = $(element).children("span.source_aqua").text();
followed by a replacer for the detail page:
- $("#thedetails").item("replace", {common_name:comm, recommendation:reco}).chain();
- }
The filter function for the
list is not important now, since the filter works perfectly. But here it is:
- <form>
- <ul class="edit rounded">
- <li><input id="search" type="search" name="search" onKeyUp="filter()" placeholder="Search" autocomplete="on"></input></li>
- </ul>
- </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:
- <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:
- <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">
- <ul>
- <li><span class="common_name"></span></li>
- </ul>
- </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:
- IF JSON 'source_wild' = "1" THEN PARSE THIS:
- <li><img scr="images/icon_wild.png"> Wild Caught Species</li>
- END IF
- IF JSON 'source_wild' = "0" THEN PARSE NOTHING
and also an other "ON/OFF SWITCH

":
- IF JSON 'source_aqua' = "1" THEN PARSE THIS:
- <li><img scr="images/icon_aqua.png"> Aquaculture Breed</li>
- END IF
- 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.