Here's a snippet of my JSON file
[{
"id" : "61344",
"bandappname" : null,
"stageID" : "637",
"title" : "The band title",
"description" : "Some description",
"date" : "Friday 22nd August",
"time" : "23:00",
"stageName" : "name of the stage",
"startTime" : 1408662000,
"endTime" : 1408662060,
"weather" : {
"iconcode" : "04n",
"desc" : "broken clouds",
"temp" : 17
},
"rating" : 0,
"starstyle" : "",
"userrating" : 0,
"rated" : false,
"plannercount" : 3,
"eventimage" : "image.jpg",
"lastupdated" : "1407413423",
"activityid" : null,
"activityliked" : null
}
]
There's a few hundred nodes like this. There are 3 dates available (6th element down) and around 8 stageID's (3rd element down)
So I am thinking of creating 24 DIVs to house each unique date/stage combination.
So my question is, for each div, how would I output the following, relevant to the DIV (stageID and date), in descending order (where title and time is the actual value)
title - time
title - time
title - time
...
title - time
I've tried looking at PHP and Last.fm API and various other StackOverflow posts but have returned to a blank page. My major problem is not knowing how to loop through the nodes
Can the DIVs be create automatically - does it have to be static? Should I use jQuery or PHP?
I got this far with jQuery but I am not sure how to order the items in each div based on element.startTime
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSON</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
function convertUnix (unix) {
newDate = new Date(unix *1000)
var curr_hour = newDate.getHours();
var curr_min = newDate.getMinutes();
var convertedTime = curr_hour + ":" + curr_min;
return convertedTime
}
$.getJSON('json.json', function(data) {
$.each(data, function(index, element) {
var titleTime = "(" + element.startTime + ") "+ element.title + " - " + convertUnix(element.startTime) + " - " + convertUnix(element.endTime);
if (element.date=='Friday 22nd August') {
$('div#'+element.stageID+'-1').append($('<p>', {text: titleTime}));
}
if (element.date=='Saturday 23rd August') {
$('div#'+element.stageID+'-2').append($('<p>', {text: titleTime}));
}
if (element.date=='Sunday 24th August') {
$('div#'+element.stageID+'-3').append($('<p>', {text: titleTime}));
}
});
});
</script>
<style>
div {border:1px solid black; width:30%; float:left; background-color:#ccc; padding:20px; margin-left:20px;margin-bottom:20px;}
div:nth-child(3n) {clear:both; margin-bottom:20px;}
</style>
</body>
<div id="643-1"></div>
<div id="643-2"></div>
<div id="643-3"></div>
<div id="644-1"></div>
<div id="644-2"></div>
<div id="644-3"></div>
<div id="642-1"></div>
<div id="642-2"></div>
<div id="642-3"></div>
<div id="641-1"></div>
<div id="641-2"></div>
<div id="641-3"></div>
<div id="640-1"></div>
<div id="640-2"></div>
<div id="640-3"></div>
<div id="639-1"></div>
<div id="639-2"></div>
<div id="639-3"></div>
<div id="638-1"></div>
<div id="638-2"></div>
<div id="638-3"></div>
<div id="637-1"></div>
<div id="637-2"></div>
<div id="637-3"></div></html>
