javascript - jQuery 无法从 JavaScript 对象获取正确的下拉菜单值

Question

我用了这个例子https://stackoverflow.com/a/7601415/2118559

但是我无法让它正常工作

首先在外部 php 文件中有这样的数组 $fetch_child_topic

Array
(
   [TopicName] => A
   [TopicUrl] => a
)

在外部 PHP 文件中，我将其转换为 JSON

echo json_encode($fetch_child_topic, JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS);

在“主文件”中，JavaScript 看起来像这样 {"TopicName":"A","TopicUrl":"a"} 它的名称是 data。

这里尝试创建下拉菜单

 for (var text in data) {
    alert( 'text ' + text + ' data' + data );
    var val = data[text];
    $('<option/>').val(val).text(text).appendTo($('#first_subcat_id'))
 };

下拉菜单会显示包含 0,1,2... 等数字的长列表，但我希望看到字母 A。

在警报中我看到

text 0 data{"TopicName":"A","TopicUrl":"a"}
text 1 data{"TopicName":"A","TopicUrl":"a"}
....
text 31 data{"TopicName":"A","TopicUrl":"a"}

出了点问题...但我不明白是什么。

请问有什么想法吗？

编辑

php 文件中的代码是这样的(代码稍作修改，只有一列)

从mysql获取数据

try {
$stmt = $db->prepare("SELECT TopicName FROM $table_name WHERE UpperTopicName = ?"); 
$stmt->execute( array($_POST['main_topic']) );
$fetch_child_topic = $stmt->fetchAll(PDO::FETCH_COLUMN);
}//try {
catch (PDOException $e){
echo "<br> Url DataBase Error: " .htmlspecialchars( $e->getMessage() , ENT_QUOTES, "UTF-8").'<br>';
}
catch (Exception $e) {
echo "  Url General Error: ".htmlspecialchars( $e->getMessage() ).'<br>';
}

和

echo json_encode($fetch_child_topic, JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS);

解决方案

从外部 php 文件获取数据后(jquery var 的名称是 data)，执行此操作

var data = $.parseJSON( data );
$.map( data, function( val, i ) {
$('<option/>').val(i).html(val).appendTo('#first_subcat_id');
});

在下拉菜单中获取字母 A、B(如预期)

Answer 1

您的 JavaScript 最终在源代码中应该如下所示。

var data = {"TopicName":"A","TopicUrl":"a"};  // <== this is a javascript object literal assigned to the variable "data"

var text, val;
for (text in data) {
    val = data[text];
    alert( 'text ' + text + ', val' + val);
    $('<option/>').val(val).text(text).appendTo($('#first_subcat_id'));
}

如果你有一些类似的 HTML

<select id="first_subcat_id"></select>

如果您的 var data = 行的结构不是这样，那么您的 PHP 中的某个地方就会出现问题。

如果您的 PHP 文件生成整个文档，您可以将 json_encode 的输出嵌入到 JavaScript 中，如下所示。

<script type="text/javascript">
var data = <?= json_encode($fetch_child_topic, JSON_HEX_QUOT|JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS); ?>;

var text, val;
for (text in data) {
    val = data[text];
    alert( 'text ' + text + ', val' + val);
    $('<option/>').val(val).text(text).appendTo($('#first_subcat_id'));
}
</script>

我认为 fetchAll 不会以您在示例顶部显示的格式返回数组。它返回一个关联数组的数组，所以可能更像

Array
(
   [0] => Array
      (
         [TopicName] => A
         [TopicUrl] => a
      )
)

您需要删除外部数组。因此，只需执行类似这样的操作...具体取决于 SQL 查询返回的实际输出。

$fetch_child_topic = $fetch_child_topic[0];