Using a JSON object’s array as a JS variable

nerd post!

i wrestled with this for most of yesterday and even had a few of my coworkers helping out and this morning we solved it. so it’s good for blogging because i hope it helps someone else!

i’ve got this kinda json:

{
  "episodes": [
    {
      "airdate": "20140822",
      "playlist": [
        {
          "filepath": "audio1.mp3",
          "title": "part 1",
          "date": "August 22, 2014",
          "description": "This is the first part of the episode."
        },
        {
          "filepath": "audio2.mp3",
          "title": "part 2",
          "date": "August 22, 2014",
          "description": "This is the second part of the episode."
        },
        {
          "filepath": "audio3.mp3",
          "title": "part 3",
          "date": "August 22, 2014",
          "description": "This is the third part of the episode."
        }
      ]
    {
  ]
}

(jsonlint is my very good friend.)

imagine this json file is full of many episodes with different air dates. i want to be able to pass a date query with my url in order to find the episode whose air date matches that query — in this case 20140822. then i want to grab the parts listed in that episode’s playlist array and assign them to a javascript variable which i need for a different script — and keep in mind i want to keep them in an array-type configuration.

in the sample code below, i’m not including the script where i got the query date from the url (but here’s a link to what i used). i’m just highlighting the code that my helpful coworkers and i landed on to accomplish the main goal. (see: this post’s subject line)

var episodes;
var $playables = [];
	
// load json data per url query string result
$.ajax({
  url: 'episodes.json',
  type: 'get',
  async: false, // i want this data to run before the rest of my scripts run!
  success: function(data) {
    // loop through the json file to find the object with the matching air date
    for (i = 0; i < data.episodes.length; ++i) {
      if (data.episodes[i].shortdate === URLdate) {	
        // loop through this episode's playlist to get all of the parts
        for (j = 0; j < data.episodes[i].playlist.length; ++j) {
          // put the parts into a js variable!
          $playables[j] = data.episodes[i].playlist[j];
        }		
      }
    }
  }
});

the really important parts of this script are:

  1. async: false because my other scripts were running at the same time as this script and so my variable wasn’t being properly defined before it was needed and
  2. the second for loop! i think i almost tried that yesterday but for some reason it seemed like too much script…

and i am happy to end this week with some success! lots of challenges means lots of learning this week. i’m kinda ready for a nap.

MinneWebCon14_posterhey, by the way — have i mentioned that bertine and i were accepted to speak at minnewebcon this year? it’ll be my first time giving a conference presentation so i’m glad that i’ll be partnered with a friend. it’ll be crazy. hopefully it’ll be fun! if you’re coming to the conference (which you totally should because the organizers are among the best), please say ‘hi!’.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.