Json在我的列表框中獲取「未定義」值

Question

用戶需要點擊演員列表中的演員。現有的電影標題將被刪除，然後只會顯示與所選演員相關的電影標題。

在選擇演員後，我的「dvdtitle」列表框會收到「未定義」列表。不過，我檢查json_encode功能與$('#actor').text(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"}] 

我不知道我在做什麼錯。

//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

data是一個對象數組。 i的值是對象的索引，j是對象。

這裏：

$.each(x, function(i, j){ 
    $.each(j, function(k, v){ 
     var row = "<option value=\"" + k + "\">" +v+ "</option>";     
     $(row).appendTo("select#dvdtitle"); 
    }); 
    }); 

你可以看到更多信息jQuery的文檔：http://api.jquery.com/jQuery.each/

Answer 2

的問題是，你的阿賈克斯返回包含一個鍵/值對電影ID作爲對象鍵和電影標題作爲值。這使得檢索數據變得更加困難，因爲在each循環中您不知道要查找哪個ID。

理想情況下，你有你的JSON格式的這種方式來代替：

[ 
    {"id":503,"title":"Caught In The Crossfire"}, 
    {"id":690,"title":"Dead Man Running"} 
] 

這將允許您使用j.id和j.title因爲JSON使用「id」和「標題檢索您的each循環中的數據「作爲關鍵。但是因爲沒有按照這種方式組織，所以需要遍歷對象的每個鍵/值對。

理想情況下，你會想你的PHP改成這樣：

$final_array[] = array(
    'id' => $rowActor['id'], 
    'title' => $rowActor['title'] 
); 

而且使用j.id和j.title（如VAR行= "<option value=\"" + j.id + "\">" + j.title + "</option>";）。

下面是一個沒有修改你的PHP代碼的例子： 這個例子是基於你上面的例子。 data變量是您的Ajax請求中收到的內容。

// 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/

我希望是有道理的。

PS：您可能還想更改$q=$_POST['input'];以使用mysql_real_escape_string來防止SQL注入。