json loop load elements

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.

$.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:

{
	"@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

Demo

Other Items in js
Page Views

This page has been viewed 205 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹