從jQuery函數中讀取PHP中的JSON數組

我使用接受的答案this question來幫助我使用jQuery從JSON數組構建HTML選擇菜單。從jQuery函數中讀取PHP中的JSON數組

我JSON陣列從一個PHP腳本作爲$菜單過去了，看起來是這樣的：

{ "options": [ 
    { "id":"7","name":"Smith, John"}, 
    { "id":"4","name":"Jones, Tom"} 
    ] 
}

首先，我建我的選擇菜單的骨架，並將其插入到頁面：

var div = '<div class="row">'; 
var label = '<label for="employee">Employee</label>'; 
var select = '<select name="employee id="employee">'; 
var close = '</select></div>'; 
var menu = div + label + select + close; 

$('#clicked_link').prepend(menu);

然後我嘗試在$菜單數組傳遞給jQuery的是這樣的：

var json = '<?php echo $menu; ?>';

然後我嘗試添加的選項爲t他新創建的選擇菜單，使用從linked question的例子：

var options = eval('(' + json + ')'); 
var length = options.length; 

for (var j = 0; j < length; j++) 
{ 
    var newOption = $('<option/>'); 
    newOption.attr('id', options[j].id); 
    newOption.attr('name', options[h].name); 
    $('#employee').append(newOption); 
}

的選擇菜單顯示爲預期，但它不包含任何選項。任何人都可以看到我的錯誤（s）？提前致謝。

修訂，以納入火箭的解決方案：

var json = <?php echo $menu; ?>; 

var options = json.options; 
var length = options.length; 

for (var j = 0; j < length; j++) 
{ 
    var newOption = $('<option/>'); 
    newOption.attr('value', options[j].id); 
    newOption.attr('text', options[j].name); 
    $('#employee').append(newOption); 
}

來源

2012-04-02 cantera

你並不需要使用eval，甚至JSON.parse這裏。 JSON是有效的JavaScript代碼。你可以這樣做：

var json = <?php echo $menu; ?>; // Note: the quotes have been removed.

這將使下面的代碼：

var json = { "options": [ 
    { "id":"7","name":"Smith, John"}, 
    { "id":"4","name":"Jones, Tom"} 
    ] 
};

，正如你所看到的，是有效的JavaScript代碼。

然後你可以做var options = json.options。

來源

2012-04-02 16:35:54

感謝您的回覆。我已經實現了你的解決方案，但得到了相同的結果（一個空的選擇菜單）。我在我的問題中發佈了更新版本。我也可能在循環中做錯了什麼？ – cantera 2012-04-02 16:53:42

@ cantera25：在你的循環中，你有'選項[h] .list'。什麼是'h'？另外，你的'options'對象沒有'list'屬性。 – 2012-04-02 16:55:27

明白了 - [h]在相關問題的接受答案中是一個錯字，我只是假設它是正確的。我現在去編輯。將其更改爲[j]並在循環中切換爲「文本」和「值」就可以實現。再次感謝所有人。 – cantera 2012-04-02 17:01:15

爲什麼不

var options = JSON.parse(json).options;

來源

2012-04-02 16:32:45

+1給Rocket的回答，我相信你的循環中也有一個bug。行

newOption.attr('name', options[h].list);

h沒有定義。您可能需要j。 name屬性在option上沒有意義。對於將顯示的值，請設置text。對於提交表單時將發送給服務器的值，請設置爲value。

來源

2012-04-02 16:54:18 philo