Question

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?

Answer 1

The first thing I would change is that you are calling $.getJSON("json_events.php"... twice. You should only call it once because the data shouldn’t change between calls. You could join the two calls together, but…

Since you only really want the first event title as a result of this block:

$.getJSON("json_events.php",function(data){
    $.each(data.events, function(i,events){
        $("#title").html("First event title: " + events.title + " ...");
    });
});

All you really need is to add this to your first $.getJSON call and get rid of the above block:

$("#title").html("First event title: " + data.events[0].title + " ...");

You can add that right after this:

    $(tblRow).appendTo("#eventsdata tbody");
});

This would also solve the problem of why you are showing the second event title. You were iterating through all titles and setting the value to the last one.

---

Another thing to be careful of is escaping invalid characters in your JSON response. One of the details fields has quotes in it, which would mess up the data.