Populating dropdown from JSON string that was returned from a PHP CODE

Question

I am returning a JSON array from my PHP class. Part of the code is as follows:

...
echo json_encode($users);
return json_encode($users);

?>

The echo statement of the above code is as follows:

[
    {
        "ID": "1",
        "firstname": "Jane",
        "school": "Frohj"
    },
    {
        "ID": "2",
        "firstname": "Mathew",
        "school": "Lebrasky"
    },
    {
        "ID": "3",
        "firstname": "BAHUUU",
        "school": "uni of kansas"
    }
]

Now, in my html form i have a DROPDOWN.

     <fieldset>
          <legend>Selecting elements</legend>
          <p>
             <label>Select list</label>
             <select id = "myList">
               <option value = "1">I WANT TO DISPLAY USER'S NAME HERE</option>
               <option value = "2">I WANT TO DISPLAY USER'S NAME HERE</option>

             </select>
          </p>
       </fieldset>

I want to display users firstnames as the fields in the dropdown box. The values for this, is obtained from the JSON that was passed. Now how do i, retrieve the JSON and populate the dropdown box with firstnames of users.

lets assume `$data` is an json array. then using foreach loop u will get solution. like that `$data[i][firstname]` — Prashant Tapase, Oct 02 '14 at 10:02
http://stackoverflow.com/questions/5952284/jquery-fill-dropdown-with-json-data — Prashant Tapase, Oct 02 '14 at 10:09

score 0 · Answer 1 · answered Oct 02 '14 at 10:03

0

You can decode to json result by json_decode($users); this function to convert json result it to array.

with the help of loop you can easily print your options.

answered Oct 02 '14 at 10:03

Ranjeet Singh

662
5
12

Where should i do this ? The main problem i have is to bring the result set to the HTML. how can i do this ? – Illep Oct 02 '14 at 10:04
what are you using to get result. ajax.? – Ranjeet Singh Oct 02 '14 at 10:07
Well, That is the problem i have. I am sending the JSON string, but i don't know how to retrieve the result. Can you help me here – Illep Oct 02 '14 at 10:08
so you need to parse json. like: success:function(result){ var text = parseJSON(result); } then use a for loop to create a tab dynamic in jquery file. and append to this your select box. Such as : for($i=0; $i'+text[i]['firstname']+'').appendTo('#myList'); } – Ranjeet Singh Oct 02 '14 at 10:12
with the help of loop you can easily print your options. parse JSON: success:function(result){ var text = parseJSON(result); $('#mylsit').empty(); for(var i=0; i'+text[i].firstname+'').appendTo('#mylist'); } } – Ranjeet Singh Oct 02 '14 at 10:22

TheGr8_Nik · Answer 2 · 2014-10-02T10:20:57.967

0

Something like this:

head of the html page (with php extension)

<?php include 'pathTo/find.php' ?>

in your script tag:

var
  i, len,
  html = ''
  list = <?php echo getUsers(); ?>;

for ( i = 0; len = list.length; i < len ) {
    html += '<option value="'+ i +'">'+ list[i].firstname +'</option>';
}

// $( html ).appendTo( $( '#myList' ) ); <-- jQuery method
document.getElementById( 'myList' ).innerHtml = html;

your body tag:

<fieldset>
    <legend>Selecting elements</legend>
    <p>
    <label>Select list</label>
    <select id = "myList">
    </select>
    </p>
</fieldset>

edited Oct 02 '14 at 10:20

answered Oct 02 '14 at 10:08

TheGr8_Nik

3,080
4
18
33

The name of my PHP script is find.php. If so how do i retrieve data to the form. – Illep Oct 02 '14 at 10:09
your script is not on the page? – TheGr8_Nik Oct 02 '14 at 10:11
No. I have it in a separate class. the name of it is find.php. – Illep Oct 02 '14 at 10:12
hi @llep, if we could just check out your find.php live, that'll be great. If you have uploaded it on your dev server and if you don't mind sharing it that will be very helpful for us. Thanks! – Vincent Edward Gedaria Binua Oct 02 '14 at 10:12
@Illep - your page is a php page? – TheGr8_Nik Oct 02 '14 at 10:14
@TheGr8_Nik The page that contains the dropdown is a HTML (But i could make it .php). The find.php which does all the DB calls is a PHP page. – Illep Oct 02 '14 at 10:15
@Illep - so you can include your find.php function file in the html page (with .php extenction) ad the call the function that returns the array – TheGr8_Nik Oct 02 '14 at 10:18
May i know what is ; – Illep Oct 02 '14 at 10:24
it's a function defined in your `find.php` file that returns the JSON array of all your users – TheGr8_Nik Oct 02 '14 at 10:25

score 0 · Answer 3 · answered Oct 02 '14 at 10:09

Think your select should be empty at the beginning, then new options should be appended with javascript.

<select id = "myList"></select>

<script type="text/javascript">
var data = SOME_SORTOF_GET_JSON(), // get json from your existing function
    select = document.getElementById("myList"),
    newOption;

for(var i = 0, item; item = data[i]; ++i) {
    newOption = new Option(item.firstname, item.id);
    select.add(newOption);
}
</script>

Good luck.

Populating dropdown from JSON string that was returned from a PHP CODE

3 Answers3