this content was originally posted here.

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

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/expenses.extend.php
Class Extend Loaded: class/extends/gary_cummins_timeline.extend.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/osrs_slayer_monsters.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: expenses.db
expenses add_to_menu:
Class Extend Auto Initialized as: expenses
Core Database Connected: gary_cummins_timeline.db
gary_cummins_timeline add_to_menu:
Class Extend Auto Initialized as: gary_cummins_timeline
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: osrs_slayer_monsters.db
osrs_slayer_monsters add_to_menu:
Class Extend Auto Initialized as: osrs_slayer_monsters
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:code
$p3:RljWA
$p4:json-loop-load-elements
$p5:
$p6:
$p:/view/code/RljWA/json-loop-load-elements/
Using Template: view-code.html