StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLoop through JSON string and create dynamic JS output
text
Body
copied!<p>Basically, I'm grabbing information from and API and outputing it in JS. Currently, I have things working in PHP. Instead of outputing JS with PHP, I would like to make it cacheable in a JS file. Using WordPress, I've grabbed the API information, json encoded it, and localized it for use in JS. </p> <p>Here is my new JS var with the JSON string information:</p> <pre><code>var discographyJson = php_params.discography_setup.replace( /&quot;/g, '"' ); </code></pre> <p>This JSON output looks something like this:</p> <pre><code>{ "discography": [ { "album_id":1, "tracks":[ {"title":"Track 1 of Album 1"}, {"title":"Track 2 of Album 1"}, {"title":"Track 3 of Album 1"} ] }, { "album_id":2, "tracks":[ {"title":"Track 1 of Album 2"}, {"title":"Track 2 of Album 2"}, {"title":"Track 3 of Album 2"} ] } ] } </code></pre> <p>What I would like to do, is loop through that content using JS/jQuery and create the following output, if possible.</p> <pre><code>$( '#album_1' ).click( function() { myPlaylist.setPlaylist([ { title: "Track 1 of Album 1" }, { title: "Track 2 of Album 1" }, { title: "Track 3 of Album 1" } ]); }); $( '#album_2' ).click( function() { myPlaylist.setPlaylist([ { title: "Track 1 of Album 2" }, { title: "Track 2 of Album 2" }, { title: "Track 3 of Album 2" } ]); }); </code></pre> <p>Not being a JS/jQuery guru, I've racked my brain an spent many hours getting things this far. I cannot figure out how to loop through the JSON data to setup the jQuery functions. However, I've learned a bunch from the hours of trial and error debugging.</p>

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