Script that calls HubDB and appends podcast information to HubSpot blog posts

podcast-based-hubspot-blog.html

<!-- note: json is unminified for readability -->

<!-- I'm using this section to print out the HubDB for the podcast on the page so I can easily access it by blog ID.
I would use one table per podcast, as it seems rare you'd get much past a few hundred rows. -->

<div id="json-object" style="display:none;">
[{
{% for row in hubdb_table_rows(677960) %}
  "{{ row.blog_id }}": {
		"soundcloud_track_number": "{{ row.soundcloud_track_number }}",
		"itunes": "{{ row.itunes }}",
  	"google_play": "{{ row.google_play }}",
  	"pullquote": "{{ row.pullquote }}",
  	"summary": "{{ row.summary }}"
	},
{% endfor %}
}]
</div>
<script>
  
/* NOTE: script is unminified for readability */
  
/* store the HubDB table in a js object for easier access */
var podcastObject = $.parseJSON($("#json-object").html().replace(/,(?=[^,]+$)/, ''));

/* find any blog IDs present on the page to be able to query the podcastObject*/
var contentIDs = document.getElementsByClassName( "content-id" );

/* a double loop through two objects - for each blog post, go through each corresponding row of the HubDB
and place the correct podcast information into the needed locations in the DOM */
$.each(contentIDs, (function(index, element) {
	
  /* on the listing pages, each blog's podcast objects are identified by an ID that contains the blog ID. this makes it easily
  accessible in the sub-loop */
	var blogID = $(element).html(); 

  /* looping through the podcast episode information for each blog post and placing necessary info in right locations */
	$.each(podcastObject[0][blogID], (function(index, element) {

    /* constructing the ID that will identify each object in the DOM that each row info needs to be placed within*/
		var tagID = "#" + index + "-" + blogID;

    /* breaking down the various kinds of content: iframe embed for soundcloud player, podcast links, and text*/
		switch (index) {
			case "soundcloud_track_number": 
				$(tagID).html("<iframe width='100%' height='166' scrolling='no' frameborder='no' allow='autoplay' src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/" + element + "&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true'></iframe>");
				break;
			case "itunes": 	
			case "google_play":
				$(tagID).attr("href", element);
				break;
			default:
				$(tagID).html(element);
		}
	})) 
}))
</script>