This code brings in JSON data for multiple entities (in this case Pyladies groups) in a single call to a public api, and then manipulate that data after retrieval for placement in separate entity-owned divs on a web page. In this case I identified each div using an html5 data-attribute given the group_id # assigned to it by meetup.com (ie, <div …

meetups_indiv.js

// Make a single api call to meetup.com and grab event info for all (11) PyLadies locations. Create individual objects for each so that meetups can be added to each pyladies group's div on pyladies.com/locations page.

//helper function to discover event urls and make active links
//credit to http://www.sencha.com/forum/archive/index.php/t-12379.html for code this is based on
function create_urls(input) {
        return input
        .replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim, '"$&" target="_blank"')
        .replace(/([^\/])(www[\S]+(\b|$))/gim, '"http://$2" target="_blank"');
    } //end url parsing helper function

//helper to convert the date of each meetup event from time in miliseconds to a readable date format
function convert_time_miliseconds_to_date(t) {
        var d = new Date(t); // The 0 there is the key, which sets the date to the epoch
        return String(d).slice(0, 11);
}// end convert_time..


// Make the API call to return data object containing event objects for all pyladies chapters
// *make sure variables surrounded by single quotes as below*
var group_ids = '/* ids for current pyladies chapters in comma-separated list goes here (no spaces); find by visiting: http://www.meetup.com/meetup_api/console/ and paste: /groups?group_urlname=your_group_name_here in the console */';
var meetup_key = '/* your meetup api key from: http://www.meetup.com/meetup_api/key goes here */';

// This is our primary function, which makes call to return json from meetup api and passes that data on to our other functions
function addUpcomingMeetups() {
    $.ajax( {
      url: 'http://api.meetup.com/2/events.json?key='+meetup_key+'&group_id='+group_ids+'&fields=group_photo&time=0m,1m&status=upcoming&sign=true',
      dataType: 'jsonp',
      success: function(data) {
        var group_ids_matching_list = [];
        var events_list = [];
        var groups_and_events_list = [];
        var html;
        getGroupIdsList(data, group_ids_matching_list);
        breakIntoGroups(data, events_list);
        matchGroupIdsToEvents(group_ids_matching_list, events_list, groups_and_events_list);
        buildHtml(groups_and_events_list);
      },
      error: function(data) {
        errorHtml(data);
      }
    });
  return false; //end .ajax()
} //end getUpcomingMeetups


// Since api call returns array of event objects, we need a way to get at the group ids to sort events
// First, drill down through the data results to get to group ids, and add them to list one by one
// Later, we will run our event objects against this list to assign them to groups for display
function getGroupIdsList(data, group_ids_matching_list) {
    for (var key in data.results) {
        for (var subkey in data.results[key]) {
            if (subkey == "group") {
                for (var subsubkey in data.results[key][subkey]) {
                    if (subsubkey == "id") {
                        group_ids_matching_list.push(data.results[key][subkey][subsubkey]);
                    }
                }
            }
        }
    }
    //console.log(group_ids_matching_list);
    return group_ids_matching_list;
}


// Iterate through our json data again, this time splitting the set into individual event objects
// put event objects into an array that we will match against our list of group ids
function breakIntoGroups(data, events_list) {
    for (var key in data.results) {
        events_list.push(data.results[key]);
    }
    //console.log(events_list);
    return events_list;
}


// Count up through our two arrays (group ids and events), matching index #s of each to make a new array of separate json objects
// First level of our new json data heirarchy will be group id followed by the matching event object
function matchGroupIdsToEvents(group_ids_matching_list, events_list, groups_and_events_list) {
    for (var i=0; i < group_ids_matching_list.length; i++) {
        groups_and_events_list.push({groups: group_ids_matching_list[i], meetups: events_list[i]});
    }
    //console.log(groups_and_events_list);
    return groups_and_events_list;
}


// iterate through our new master array of groups' events in order to build and place html
function buildHtml(groups_and_events_list) {
    var group_id;
    var meetup_id; //$('.chapter_location').data('meetup-id');
  
    $('.page .chapter_location li').remove(); // remove outdated events

    for (var key in groups_and_events_list) {
        group_id = groups_and_events_list[key].groups;
        meetup_id = group_id; // used for clarity to differentiate html5 data-attribute from our json group_id object

        html = '';
        url_link = create_urls(groups_and_events_list[key].meetups.event_url); // make active links from urls
        event_date = convert_time_miliseconds_to_date(groups_and_events_list[key].meetups.time); // convert miliseconds-since-epoch to standard date format
        html += '<img class="meetup_group_icon" src="'+groups_and_events_list[key].meetups.group.group_photo.thumb_link+'" height="80" width="80" />';
        html += '<p class="meetup_listing_group">'+groups_and_events_list[key].meetups.group.name+'</p>';
        html += '<p class="meetup_listing_event_title"><a href='+url_link+'>'+groups_and_events_list[key].meetups.name+'</a></p>';
        html += '<p class="meetup_event_date">'+event_date+'</p>';
        $('[data-meetup-id="'+meetup_id+'"]').find('ul').append('<li>'+html+'</li>'); // add each event to appropriate div
    }

function errorHtml(data) {
    alert("error");
  // Stubbed out for testing purposes only since production halted
  // Could do something along the lines of:
  // $('.page .chapter_location li').remove();
  // $('.page .chapter_location').find('ul').append('<li>We're sorry. Meetup is not responding at this time.</li>'); etc.
}