Databases
StackOverflow2013
Postsdbo
POlooping through json only working for first item
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POlooping through json only working for first item
    text
    copied!<p>Hi i am trying to loop through some json data and output it onto the page, my problem is it's only displaying the first item in the json, (boston manor car park) i cant get it to display the second item...</p> <p>jsFiddle: <a href="http://jsfiddle.net/35Jrc/6/" rel="nofollow">http://jsfiddle.net/35Jrc/6/</a></p> <p>HTML:</p> <pre><code>&lt;span class='showOnMap' data-related='[ {"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. 6 classic 1960 Tower Blocks"}, {"id":"4","slug":"gunnersbury-park-car-park","name":"Gunnersbury Park car park","image":"","pinType":"ub","addr":"Popes Lane, London W3 8LQ","lat":"51.49963692687797","lng":"-0.29188622747801674","contact":"Reel Film Locations: 0845 402 2998","restrictions":"Shared use with sports ground users. Weekends in season are busy with the public. 6 classic 1960 Tower Blocks"} ]'&gt; click me &lt;/span&gt; &lt;div class="relatedHeader"&gt;Unit Bases near by:&lt;/div&gt; &lt;div class="relatedDetails"&gt; &lt;/div&gt; </code></pre> <p>JS:</p> <pre><code>$('.showOnMap').click(function(){ //alert('click'); var myRelated = $(this).data('related'); createRelated(myRelated) //addToPanel(panelData); }) function createRelated(myRelated){ var relCount = 0; var rowCount = 0; var itemCount = 0; var relCount = 0; $.each(myRelated, function(k, v) { if(relCount == 3){ relCount = 0; }; // create a new row if(relCount == 0){ var rowClass = 'relRow'+rowCount; //alert('new row class: .'+rowClass); $("&lt;div&gt;&lt;/div&gt;") .addClass("detailRow "+rowClass) .appendTo(".relatedDetails"); rowCount++; } // create a new related item div var itemClass = 'item'+itemCount; //alert('new item class: .'+itemClass); $("&lt;div&gt;&lt;/div&gt;") .addClass("relatedItem "+itemClass) .appendTo('.'+rowClass); //$('.'+rowClass).append('.'+itemClass); // now loop through the keys and values and add the data //add the data to the related item $('.'+itemClass).data('location',this); //add item to to our row //$.each(obj, function(k, v) { //tmp = {"id":"5","slug":"boston-manor-park-car-park","name":"Boston Manor Park car park","image":"","pinType":"ub","addr":"Boston Manor Road, London ","lat":"51.48967509541307","lng":"-0.3164195004638941","contact":"Reel Film Locations: ","restrictions":"Shared use with park users. External features unavaliable at present"}; //if(k=='image'){ $('&lt;img/&gt;') .addClass('relatedImage') .attr("src", v.image) .appendTo('.'+itemClass) //} //if(k=='name'){ $('&lt;div&gt;&lt;/div&gt;') .addClass('relatedTitle') .html(v.name) .appendTo('.'+itemClass) //} //}); itemCount++; relCount++; }); }; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload