Trying to use json to populate areas of my website using mysql, php, and jquery.
Posted
by
RyanPitts
on Stack Overflow
See other posts from Stack Overflow
or by RyanPitts
Published on 2010-12-28T04:10:06Z
Indexed on
2010/12/28
4:53 UTC
Read the original article
Hit count: 167
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?
© Stack Overflow or respective owner