Question

我有一个应用程序，我可以生成JSON，然后我将其用作GoogleCharts API的输入以绘制不同的可视化。此Web应用程序的页面采用HTML格式。假设我有一个JSON，其中包含一个医院的部门列表，例如：[{"v":"General Medicine"},{"v":"Laboratory"}]

如何使用Javascript将其转换为数组，而数组又可用作下拉列表的选项值？

我使用以下代码生成JSON：

<?php
 $serverName = "forestroot"; //serverName\instanceName
 $connectionInfo = array( "Database"=>"****", "UID"=>"****",         "PWD"=>"****");
 $conn = sqlsrv_connect( $serverName, $connectionInfo);

 if( $conn ) {
 //echo "Connection established.<br />";
 }else{
  echo "Connection could not be established.<br />";
  die( print_r( sqlsrv_errors(), true));
 }

 $sql = "SELECT distinct([DEPT_NAME]) as dept FROM [Pristine11Dec15].[dbo].        [PACKAGE_REVN]";

 $params = array();
 $options =  array( "Scrollable" => SQLSRV_CURSOR_KEYSET );

  $result = sqlsrv_query( $conn, $sql, $params, $options);


  if (sqlsrv_num_rows( $result ) > 0) {
  while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
    $array[] =  array('v'=>$row["dept"]);

      }
  }
  echo json_encode($array);
  sqlsrv_close( $conn);
  ?>

输出为[{"v":"General Medicine"},{"v":"Laboratory"}]

当我在我的代码中使用JSON.parse时，我在下拉列表中将选项作为[object Object]。我哪里错了？

Answer 1

var json = '[{"v":"General Medicine"},{"v":"Laboratory"}]';

解析数据并使用map返回v值数组：

var list = JSON.parse(json).map(function (el) {
  return el.v;
}); // [ "General Medicine", "Laboratory" ]

DEMO

然而，您可以对此进行扩展，以构建select：

的HTML

var templ = '<option value="#{el}">#{el}</option>';

var options = JSON.parse(json).map(function (el) {
  return templ.replace('#{el}', el.v, 'g');
}).join('');

var select = '<select>' + options + '</select>';
document.getElementById('menu').insertAdjacentHTML('beforeend', select);

DEMO

如何将JSON转换为可用于绑定下拉列表中的值的数组？

1 个答案: