Json getting "Undefined" values in my Listbox - php

Question

The user is required to click on an actor from a actors list. The existing movie titles are removed and then only movies titles pertaining to the chosen actor show.
My "dvdtitle" listbox receives a list of "Undefined" after an actor is chosen. However I checked the response data from json_encode function with $('#actor').text(data) to get it visual and I do get correct.
[{"503":"Caught In The Crossfire"},
{"690":"Dead Man Running"},
{"1064":"Get Rich Or Die Trying"},
{"1145":"Gun"},{"1254":"Home of The Brave"},
{"2184":"Righteous Kill"},
{"2519":"Streets Of Blood"},
{"3273":"Twelve"}]
I don't know what I'm doing wrong.
//getactors.php
include("includes/connection.php");
$q = $_POST['input'];
$final_array = array();
$resultActor = mysql_query("SELECT id, title, plot, catagory, release_date, rated FROM dvd WHERE actors LIKE '%".$q."%' ");
while($rowActor = mysql_fetch_array($resultActor)) {
$final_array [] = array( $rowActor['id'] => $rowActor['title'] );
}
echo json_encode($final_array);
// JavaScript Document
$('#actorsname').click(function(){
var actorValue = $('#actorsname option:selected').text();
$.ajax({
type: "POST",
url: 'getactors.php',
data: {input: actorValue},
cache: false,
datatype: "json",
success: function(data) {
$('#dvdtitle option').each(function(i, option) {
$(option).remove(); // Empty DVD Listbox
});
$('#actor').text(data); // to visualy check my json Data
$.each(data, function(i, j) {
var row = "<option value=\"" + i.value + "\">" + j.text + "</option>";
$(row).appendTo("select#dvdtitle");
});
}
});
});

Answer 1

The problem is that your Ajax is returning an object containing one key/value pair with the movie ID as a key and the movie title as a value. This makes retrieving the data more difficult because you don't know in the each loop which ID to look for.
Ideally, you'd have your JSON formatted this way instead:
[
{"id":503,"title":"Caught In The Crossfire"},
{"id":690,"title":"Dead Man Running"}
]
That would allow you to retrieve the data in your each loop using j.id and j.title because the JSON uses "id" and "title" as keys. But because you don't have it organized that way, you need to loop through each key/value pairs of the object.
Ideally, you'd want to change your PHP to this:
$final_array[] = array(
'id' => $rowActor['id'],
'title' => $rowActor['title']
);
And use j.id and j.title (e.g. var row = "<option value=\"" + j.id + "\">" + j.title + "</option>";).
Here's an example without modifying your PHP code:
This example is based on your example above. The data variable is what's received in your Ajax request.
// This is the data retrieved using Ajax.
var data = [{"503":"Caught In The Crossfire"},{"690":"Dead Man Running"},{"1064":"Get Rich Or Die Trying"},{"1145":"Gun"},{"1254":"Home of The Brave"},{"2184":"Righteous Kill"},{"2519":"Streets Of Blood"},{"3273":"Twelve"}];
// Loop through each object in the data array.
$.each(data, function(key, movie)
{
// Because the ID is a key and the title a value, we can't determine the ID/title unless we loop through each one of the key/value pairs in the object. Each movie only has one key/value pair so this won't be a problem.
$.each(movie, function(id, title)
{
$('<option />').attr('value', id).text(title).appendTo('select#dvdtitle')
});
});
jsFiddle: http://jsfiddle.net/j7HGr/
I hope that makes sense.
PS: You may also want to change $q=$_POST['input']; to use mysql_real_escape_string to prevent SQL injections.

Answer 2

data is an array of objects. The value of i is the index of the object, and j is the object.
Here:
$.each(x, function(i, j){
$.each(j, function(k, v){
var row = "<option value=\"" + k + "\">" +v+ "</option>";
$(row).appendTo("select#dvdtitle");
});
});
You can see the jquery documentation for more information: http://api.jquery.com/jQuery.each/