Create dynamic select element using javascript and PHP array/JSON

Question

I have this code that creates an array in PHP and then uses json_encode for the array

<?php
//create array of items for nominal code box
$nominalCodes = array();
$array = Statuses('Nominal Codes');
foreach($array["results"] as $ret) {
    $nominalCodes[] = array('value' => $ret["name"], 'label' => $ret["display"].' ('.$ret["name"].')');
}
$nominalCodesData = json_encode($nominalCodes);
?>

i am then trying to create a select element with options from the PHP array.

I want to be able to use the data from the PHP array (value = value of select option / label = display of select option)

I have tried this code:

//Create array of options to be added
    var array = <?php echo $nominalCodesData; ?>;

    //Create and append select list
    var selectList = document.createElement("select");
    selectList.id = "mySelect";
    Cell0.appendChild(selectList);

    //Create and append the options
    for(var i = 0; i < array.length; i++) {
        var obj = array[i];
        for(var key in obj) {
            var option = document.createElement("option");
            option.value = obj[key];
            option.text = key;
            selectList.appendChild(option);
        }
    }

However, this is returning options in the select element that are:

label
value
label
value
label
value
label
value
label
value
label
value
label
value
label
value
label
value

What's the output of the php? Certainly worth editing your question to include it. — enhzflep
– enhzflep, Commented Jul 12, 2016 at 18:30
Could you maybe give us the value of print_r($nominalCodes); or echo $nominalCodesData; from your PHP? — Jacques Marais
– Jacques Marais, Commented Jul 12, 2016 at 18:34

Jacques Marais · Accepted Answer · 2016-07-12 18:44:39Z

1

Try the following JavaScript instead:

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
Cell0.appendChild(selectList);

//Create and append the options
for(var i = 0; i < array.length; i++) {
    var obj = array[i];
    var option = document.createElement("option");
    option.value = obj["value"];
    option.text = obj["label"];
    selectList.appendChild(option);
}

answered Jul 12, 2016 at 18:44

Jacques Marais

2,77619 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jose Manuel Abarca Rodríguez · Accepted Answer · 2016-07-12 18:44:42Z

JSON indexes become properties in JavaScript, so, instead of obj[key] you must write obj.key. Next is the code (pointed by arrows ◄======):

<?php
//create array of items for nominal code box
$nominalCodes = array();
//$array = Statuses('Nominal Codes');
// SAMPLE DATA ▼
$nominalCodes[] = array('value' => "aaa", 'label' => "111" . ' (aaa)');
$nominalCodes[] = array('value' => "bbb", 'label' => "222" . ' (bbb)');
$nominalCodes[] = array('value' => "ccc", 'label' => "333" . ' (ccc)');
$nominalCodesData = json_encode($nominalCodes);
?>
<html>
  <head>
  </head>
  <body>
    <div id="my_div">
    </div>
    <script type="text/javascript">
//Create array of options to be added
    var array = <?php echo $nominalCodesData; ?>;

    //Create and append select list
    var selectList = document.createElement("select");
    selectList.id = "mySelect";
    document.getElementById( "my_div" ).appendChild(selectList);

    //Create and append the options
    for(var i = 0; i < array.length; i++) {
        var obj = array[i];
      //for(var key in obj) {
            var option = document.createElement("option");
            option.value = obj.value;         //◄============================
            option.text = obj.label;          //◄============================
            selectList.appendChild(option);
      //}
    }
    </script>
  </body>
</html>

Copy-paste previous code in a file, save it as PHP and open it in your browser.

Collectives™ on Stack Overflow

Create dynamic select element using javascript and PHP array/JSON

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related