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

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