0

I have an application where I can generate JSON, which in turn I use as input to GoogleCharts API to draw different visualizations. The pages of this web application are in HTML. Suppose I have a JSON which has a list of departments of a hospital, like: [{"v":"General Medicine"},{"v":"Laboratory"}]

How do I use Javascript to convert this to an array which in turn can be used as option values of a drop down list?

I am using the following code to generate 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);
  ?>

The output is [{"v":"General Medicine"},{"v":"Laboratory"}]

When I use JSON.parse in my code I am getting the options as [object Object] in the drop down list. Where am I going wrong?

Ashesh Das
  • 365
  • 1
  • 8
  • 22
  • 1
    `var arr = JSON.parse(your_json_string_here);` – Jaromanda X Feb 19 '16 at 11:34
  • Possible duplicate of [deserialize from json to javascript object](http://stackoverflow.com/questions/6487167/deserialize-from-json-to-javascript-object) – FINDarkside Feb 19 '16 at 11:34
  • please provide code you tried and your expected output. Also I think the current array of objects you can use as it is for generation select option values – murli2308 Feb 19 '16 at 11:34
  • `var deptArray = JSON.parse(string).map(obj=>obj.v)` which can be extended to return a document fragment of option elements by adding: `.reduce((frag, v)=> {frag.appendChild(new Option(v,v));return frag}, document.createDocumentFragment())`. – RobG Feb 19 '16 at 11:52

1 Answers1

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

Parse the data and use map to return an array of v values:

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

DEMO

You could extend this however to build up the HTML for the select:

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

Andy
  • 61,948
  • 13
  • 68
  • 95
  • I think it's cleaner to use DOM methods and elements rather than markup, but each to their own… – RobG Feb 19 '16 at 11:56