将MySQL数据库结果转换为JSON数组

6

我正在尝试编写一个自动完成功能,其中自动完成项目在PHP页面加载时一次性加载。使用从MySQL数据库获取的项目,我已经创建了一个像这样的JSON数组

<?php
$bnkArray = array();
$sql_bnk = mysql_query("SELECT BName, BCode, ID  FROM bank");
while($rBnk = mysql_fetch_array($sql_bnk)){

    $bnkDet = array(
        'label' => $rBnk['BName'],
        'value' => $rBnk['BName'],
        'otherDetails' => $rBnk['BName'].'||'. $rBnk['BCode'].'||'. $rBnk['ID'] 
    );  
    array_push($bnkArray, $bnkDet);
}

?>

我需要将这个数组转换成类似于JavaScript数组的格式。
<script>

var bankSource11 = [
      {
        value: "jquery",
        label: "jQuery",
        otherDetails: "the write less, do more, JavaScript library",

      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        otherDetails: "the official user interface library for jQuery",

      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        otherDetails: "a pure-JavaScript CSS selector engine",

      }
    ];
</script>

如果我在我的自动完成中像这样调用数组,它就无法正常工作。
var bankSource = [<?php echo  $bnkArray; ?>];

这是什么数组类型...如何操作?
这是自动完成部分。
$(this).autocomplete({
            minLength: 0,
            source: bankSource,
            focus: function( event, ui ) {
                $(this).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                console.log(ui.item.value +' ____ ' + ui.item.otherDetails);
                $( "#project" ).val( ui.item.label );
                $( "#project-id" ).val( ui.item.value );
                $( "#project-description" ).html( ui.item.otherDetails );

                return false;
              }
            })


        }

你是否在同一页上同时使用JavaScript和PHP? - sandeepsure
是的,两者都在同一页中。 - Nasik Ahd
5个回答

3
请替换
var bankSource = [<?php echo  $bnkArray; ?>];

使用

var bankSource = <?php echo json_encode($bnkArray); ?>;

更改了 var bankSource = <?php echo json_encode($bnkArray); ?>; 后,自动完成功能显示为空结果。 - Nasik Ahd
控制台没有任何错误,我对数组感到困惑。 - Nasik Ahd
数组现在看起来像这样:var bankSource = [[{"label":"Public Bank Berhad","value":"Public Bank Berhad","otherDetails":"Public Bank Berhad||7296||48"},{"label":"Pan Asia Bank","value":"Pan Asia Bank","otherDetails":"Pan Asia Bank||7311||50"},{"label":"National Mercantile Bank","value":"National Mercantile Bank","otherDetails":"National Mercantile Bank||7454||51"},]]; - Nasik Ahd
1
为什么有双重的 "[" 和 "]"?请删除 <?php echo json_encode($bnkArray); ?> 周围的括号。 - mario.van.zadel
我认为你也需要实现_renderItem函数,因为你正在使用对象作为源数组。请查看https://dev59.com/jl4c5IYBdhLWcg3wOoAH - mario.van.zadel
显示剩余2条评论

2

这是一个示例示例,我根据您的要求进行了修改。请仔细研究它,如果您有任何问题,请告诉我。

 <?php
    $bnkArray = array();
    $sql_bnk = mysql_query("SELECT BName, BCode, ID  FROM bank");
    while($rBnk = mysql_fetch_array($sql_bnk)){

        $bnkDet = array(
            'label' => $rBnk['BName'],
            'value' => $rBnk['BName'],
            'otherDetails' => $rBnk['BName'].'||'. $rBnk['BCode'].'||'. $rBnk['ID'] 
        );  
        array_push($bnkArray, $bnkDet);
    }

    ?>


    <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        var bankSource11  = <?php echo json_encode($bnkArray); ?>;
        $( "#My_Input" ).autocomplete({
          source: bankSource11  
        });
      });
      </script>
    </head>
    <body>

    <div class="ui-widget">
      <input id="My_Input">
    </div>

如果在bankSource11变量中删除 [ ] ,它可以工作。感谢您的努力。 - Nasik Ahd
@NSK 如果您发现这个答案有帮助,请将其标记为已接受并点赞。这样,其他人也可以获得信心。 - sandeepsure

1

将此行更改为以下内容,

var bankSource = [<?php echo  $bnkArray; ?>];

to

var bankSource = "<?php echo  json_encode($bnkArray); ?>";

Php变量用引号括起来并赋值给js变量。


0
你应该做以下事情:
var bankSource11 = [<?php echo json_encode($bnkArray); ?>];

0
请注意单引号,因为它是字符串:
var bankSource = '<?php echo json_encode($bnkArray); ?>';

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接