Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed.

Load the feed

this will load the feed and console log all the data, so you can see what it is loading.

Javascript

$.getJSON( "https://kruxor.com/code/js/examples/abgt-example.json", function( data ) { console.log(data); });

Here is an example of the json feed, so we can see the elements we need to access:

JSON

{
  "@attributes": {
    "version": "2.0"
  },
  "channel": {
    "title": "Above & Beyond: Group Therapy",
    "link": "http:\/\/static.aboveandbeyond.nu\/grouptherapy\/podcast.xml",
    "description": "Group Therapy is the weekly radio show from Above & Beyond also known as ABGT",
    "language": "en",
    "copyright": "Above & Beyond",
    "lastBuildDate": "Fri, 07 Jul 2017 11:28:38 +0000",
    "category": "Music",
    "item": [{
          "title": "#239 Group Therapy Radio with Above & Beyond",
          "link": "http:\/\/www.aboveandbeyond.nu\/radio\/abgt239",
          "description": "Episode #239 \/ Ruben de Ronde x Rodg Guest Mix",
          "author": "Above & Beyond",
          "enclosure": {
            "@attributes": {
              "url": "http:\/\/traffic.libsyn.com\/anjunabeats\/ABGT239_LiveShow070717.m4a",
              "length": "115205480",
              "type": "audio\/mpeg"
            }
          },
          "guid": "abgt239",
          "pubDate": "Fri, 07 Jul 2017 08:10:00 +0000"
        }

Now we need to loop through each item in the channel to display all the results.

$.each( data.channel.item, function( key, val ) {

key is not really used in this loop val is where all the data is

you can access each item using: val.title to grab the title, etc. if you want to show any of the main data you can use. data.element

in the loop use: val.title

out of the loop use: data.title

if you have some tricky data in like the @attributes element, you might need to access it using the following method. this is how to access the url in the @attributes.

source_url = val['enclosure']['@attributes']['url'];

Note: you cant access the @attributes with the normal method, as it has invalid characters. So val.enclosure.@attributes.url will return an error.

Now we can put it all together to show the content from this json feed.

here is a function that will load the json and display the content in a #content div

function load_pod() {
	$("#content").html("Loading...");

	$.getJSON( "https://kruxor.com/code/js/examples/abgt-example.json", function( data ) {
	  var items = [];
	  var x = "";

	  console.log(data);
	  console.log(data.channel.category);
		// console.log(data.articles[0].description); // this works to extract the 1st item. 

		x = x + "<div class='details'>";
		x = x + "<h1>"+ data.channel.title +"</h1>";
		x = x + "<p>"+ data.channel.description +"</p>";
		x = x + "<p>Category: "+ data.channel.category +"</p>";
		x = x + "</div>";

	  $.each( data.channel.item, function( key, val ) {

	  	source = val['enclosure']['@attributes']['url'];
	  	audio = "<audio controls class='audio' preload='none'><source src='"+source+"' type='audio/mpeg'></audio>";

	  	x = x + "<div class='news-item'>";
	  	x = x + "<div class='news-title'><a href='"+val.link+"' target='_blank'>" + val.title + "</a></div>";
	  	x = x + audio;
	  	x = x + "<div class='description'>" + val.description + "</div>";
	  	x = x + "<div class='date-time'>" + val.pubDate + "</div>";
	  	x = x + "</div>";

	  });

	  $("#content").html(x + "<p><a href='#' target='_blank'>Source</a></p>");

	});	
}

Now we just need a div tag with content id.

<div id="content">...</div>

And for this one you need to include jquery as well.

Here is a working example:

This is a good overview of accessing json elements. stackoverflow