populate select option with JSON data

Question

I have seen many examples and I have used this myself in many of my programs but for some reason this doesn't want to work today.

I have JSON data that I can show in console.log but it is unusable in my select. I get this error in my console:

Cannot use 'in' operator to search for '76' in {"hello1":"hello1","hello2":"hello2"}

This is my code:

$.get("JSON.php?value=two", function(response) {
    console.log(response);
    // this is what my JSON returns 
    // {"hello1":"hello1","hello2":"hello2"}

    if (response != '') {
        $('#dropdown').find('option').remove(); 
        $.each(response,function(key, value){
            $('#dropdown').append('<option value=' + key + '>' + value + '</option>');
        });
    }
)};

AJAX request aside, your [code works absolutely fine](https://jsfiddle.net/RoryMcCrossan/nghLLmdo/). Therefore the issue must lay with the AJAX request. Check the console to ensure it is completing correctly, and also returning the data you expect. — Rory McCrossan, Jul 04 '16 at 07:57
Your response is an object and can code is for Array. See : http://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object — Jya, Jul 04 '16 at 07:59
my AJAX request is working fine. I say so because it returns data, hence i can console log my data. I see my data and its in correct format. It just does not want to populate in my select. i double checked my select id . even renamed it. It just doesnt want to work — erny, Jul 04 '16 at 08:05
No my array is not an object. Its a plain array. {"hello1":"hello1","hello2":"hello2"} — erny, Jul 04 '16 at 08:09

score 1 · Answer 1 · answered Jul 04 '16 at 08:14

I just tested this successfully

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        var response = {"hello1":"hello1","hello2":"hello2"} ;
        $('#dropdown').find('option').remove(); 
        $.each(response,function(key, value){
            $('#dropdown').append('<option value=' + key + '>' + value + '</option>');
        });
    });

    </script>
</head>
<body>
    <select id="dropdown"></select>
</body>
</html>

Please check. You will get something

it doesnt work. could you please try with jquery-2.1.1.min.js — erny, Jul 04 '16 at 08:23

score 0 · Answer 2 · answered Jul 04 '16 at 08:10

0

To achieve this your response should be an Array of Objects.

[
  {
   hello1 : "hello1"
  },
  {
   hello2 : "hello2"
  }
]

answered Jul 04 '16 at 08:10

sachq

672
7
11

if this is my JSON how would i achieve that foreach ($names as $key => $value) { $data[$value['surname']] = $value['name']; } echo json_encode($data); – erny Jul 04 '16 at 08:18
Could you post your php code so that i can get better understanding of your problem! – sachq Jul 04 '16 at 08:55
`$obj_arr = [ 0 => [ 'hello1' => 'hello1', ], 1 => [ 'hello2' => 'hello2' ] ]; echo json_encode($obj_arr);` – sachq Jul 04 '16 at 08:57

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Solution

Worked when Array was converted to Object

$.get("JSON.php?value=two", function(response) 
    {
        console.log(response);
        // this is what my JSON returns 
        // {"hello1":"hello1","hello2":"hello2"}
    
        if (response != '') 
        {
            var response2 = JSON.parse(response);
            $('#dropdown').find('option').remove(); 
            $.each(response2,function(key, value){
             $('#dropdown').append('<option value=' + key + '>' + value + 
                '</option>');
            });
         }
    )};

populate select option with JSON data

3 Answers3