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

How to convert a JSON to an array which can be used to bind values in a dropdown list?

本文关键字：下拉列表 绑定 用于 数组 JSON 转换      更新时间：2023-09-26

我有一个应用程序，我可以在其中生成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 时，我在下拉列表中获得了 [对象对象] 的选项。我哪里出错了？

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

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

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

演示

但是，您可以对其进行扩展以构建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);

演示

相关文章：