Trying to use json to populate areas of my website using mysql, php, and jquery.
- by RyanPitts
Ok, so this is my first attempt at doing anything with JSON. I have done a lot with PHP and MySql as well as jQuery and JavaScript...but nothing with JSON. I have some data in a MySql database. In the codes below i am using a PHP file to retrieve the data from the MySql database and using json_encode to format it to JSON. This file is being called by the JavaScript that runs when the page loads (well, it runs on document.ready actually). I then use jQuery to access the JSON keys and values to fill in areas of the page "dynamically". Here is the code snippets i am using (excuse my "noobness" on writing these snippets, still learning all this).
This is my script that is on my HTML page test.php:
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("json_events.php",function(data){
$.each(data.events, function(i,events){
var tblRow =
"<tr>"
+"<td>" + events.id + "</td>"
+"<td>" + events.customerId + "</td>"
+"<td>" + events.filingName + "</td>"
+"<td>" + events.title + "</td>"
+"<td>" + events.details + "</td>"
+"<td>" + events.dateEvent + "</td>"
+"<td><a href='assets/customers/testchurch/events/" + events.image + "'>" + events.image + "</a></td>"
+"<td>" + events.dateStart + "</td>"
+"<td>" + events.dateEnd + "</td>"
+"</tr>"
$(tblRow).appendTo("#eventsdata tbody");
});
});
$.getJSON("json_events.php",function(data){
$.each(data.events, function(i,events){
$("#title").html("First event title: " + events.title + " ...");
});
});
});
</script>
This is the code for the php file being called by the above JS: json_events.php
<?php
require_once('includes/configread.php');
$arrayEvents = array();
$resultsEvents = mysql_query("SELECT * FROM events");
while($objectEvents = mysql_fetch_object($resultsEvents)) {
$arrayEvents[] = $objectEvents;
}
$json_object_events = json_encode($arrayEvents);
$json_events = "{\"events\": " . $json_object_events . " }";
echo $json_events;
require_once('includes/closeconnread.php');
?>
This is my JSON that is held in the variable $json_events from my php file json_events.php:
{
"events": [
{
"id": "2",
"customerId": "1004",
"filingName": "testchurch",
"title": "Kenya 2011 Training Meeting",
"details": "This meeting will be taking place on Sunday, February 10th @ 6pm. Get ready for our annual Kenya trip in 2011. We have been blessed to be able to take this trip for the past 3 years. Now, it's your turn to bless others! Come to this training meeting to learn how to minister to the people in Kenya and also learn what we'll be doing there.",
"dateEvent": "2011-02-10",
"image": "kenya2011.jpg",
"dateStart": "2010-09-04",
"dateEnd": "2011-02-10"
},
{
"id": "6",
"customerId": "1004",
"filingName": "testchurch",
"title": "New Series: The Journey",
"details": "We will be starting our new series titled "The Journey". Come worship with us as we walk with Paul on his 2nd missionary journey.",
"dateEvent": "2011-01-02",
"image": "",
"dateStart": "2010-09-06",
"dateEnd": "2011-01-02"
}
]
}
This is my HTML on test.php:
<table id="eventsdata" border="1">
<thead>
<tr>
<th>id</th>
<th>customerId</th>
<th>filingName</th>
<th>title</th>
<th>details</th>
<th>dateEvent</th>
<th>image</th>
<th>dateStart</th>
<th>dateEnd</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="title"></div>
I have two questions really...
Question 1:
Does this code look like it is written correctly at first glance?
Question 2:
I want to be able to select only the title from the first event in the JSON array. The code i am using now is selecting the second events' title by default it seems. How can i accomplish this?
