Appending JSON array to select

Question

I am trying to append this JSON array to a select box

{
  "10":"Branche",
  "2":"Marketing & Comunicatie",
  "8":"Test Branche 1",
  "9":"Test Branche 2",
  "6":"Test Branche 3",
  "7":"Test Branche 4",
  "1":"Webdevelopment & design"
}

But it doesn't work I encoded it from a PHP array. This is how I am trying to loop through it.

this.addOption = function(name, table, value){
    $.ajax({
        type: "POST",
        data: {action:'add', table:table, value:value},
        url: "index.php",
    })
    .done(function( obj ) {
        $("#"+name+"-select").empty()
        console.log(name);
        $.each(obj, function( key, value ) {
            $("#"+name+"-select").append('<option value='+key+'>'+value+'</option>');
        });
    });
}

Where obj is the JSON array.

It is giving me this error:

enter image description here

How does your JSON come to obj? Maybe it needs to be parsed again. — Sirko
– Sirko, Commented Oct 16, 2014 at 12:27
@SinanSamet You should show a screenshot of the data being returned from PHP (via dev tools). More than likely it's invalid/not what you're expecting — CodingIntrigue
– CodingIntrigue, Commented Oct 16, 2014 at 12:32
Try explicitly setting dataType: 'json' in your $.ajax() options? — Anthony Grist
– Anthony Grist, Commented Oct 16, 2014 at 12:35

MrCode · Accepted Answer · 2014-10-16 12:36:42Z

3

It appears that your PHP is outputting the JSON with a content type of text/html and because you haven't told jQuery you're expecting JSON, it won't parse the response, and in the end you're trying to call $.each on a string.

Add a dataType to tell jQuery to explicitly parse the response as JSON:

$.ajax({
    type: "POST",
    data: {action:'add', table:table, value:value},
    url: "index.php",
    dataType: 'json'
})

Alternatively, set the correct content type in your PHP:

header('Content-type: application/json');
echo json_encode(...);

answered Oct 16, 2014 at 12:36

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

Comments

Shah Amit · Accepted Answer · 2014-10-16 12:29:57Z

0

Yes you can use following way:

 for(k in obj) {
    $("#branch-select").append('<option value='+k+'>'+obj[k]+'</option>');
 }

answered Oct 16, 2014 at 12:29

Shah Amit

2811 silver badge3 bronze badges

1 Comment

CodingIntrigue Over a year ago

Indeed they can. But that's not the question :)

Collectives™ on Stack Overflow

Appending JSON array to select

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related