Cannot show json data in dropdown list jquery

Question

I am getting json data from my php code something like this :

{2: "Robert ", 3: "Adem"}

Now i want to show it in dropdown list using jQuery I'm using the following code but 'm getting object in dropdown.

jQuery(response).each(function (index, value) {
  jQuery("#name").append(jQuery("<option>").val(value).text(value));
});

simply use jQuery.each(response ,function(index,value){........ instead of jQuery(response).each(function(index,value){..... And no need for JSON.parse — Mohamed-Yousef
– Mohamed-Yousef, Commented Jun 3, 2020 at 5:37

ROOT · Accepted Answer · 2020-06-03 05:52:54Z

1

Aside from doing JSON.parse(). .each() callback should be applied on Array not an Object, just convert your response object to Array using Object.values(), here is a working snippet:

let responseStr = {2:"Robert ", 3:"Adem"}; // <----- Make sure that its an object if its not then you have to do JSON.pares().
console.log(Object.values(responseStr));
jQuery(Object.values(responseStr)).each(function(index,value){
   jQuery('#name').append(jQuery('<option>').val(value).text(value));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="name"></select>

edited Jun 3, 2020 at 5:52

answered Jun 3, 2020 at 5:39

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

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

Comments

Techie · Accepted Answer · 2020-06-03 05:09:29Z

0

you need to parse them using $.parseJSON() and to retrieve data.

If you want to do without parsing refer below.

How to access JSON Object name/value?

answered Jun 3, 2020 at 5:09

Techie

45.2k45 gold badges164 silver badges248 bronze badges

Comments

Vivek Choudhary · Accepted Answer · 2020-06-03 05:41:40Z

0

If the response coming from your PHP file is a JSON string then you will have to convert it into a javascript array then iterate it to get your option

use JSON.parse();

var options = JSON.parse(JSON.stringify(response));

jQuery.each( options, function( index, value ) {
   $('#name').append('<option value="'+index+'">'+value+'</option>');
});

edited Jun 3, 2020 at 5:41

answered Jun 3, 2020 at 5:15

Vivek Choudhary

6849 silver badges16 bronze badges

6 Comments

user3653474 Over a year ago

but now i'm getting: Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse

Vivek Choudhary Over a year ago

Give it a try now.

user3653474 Over a year ago

now it not throwing any error but a single object in dropdown is shown, when i console options i get {2: "Rod ", 3: "Adem"}

Vivek Choudhary Over a year ago

Just try to append option with your old approach or append the HTML directly.

user3653474 Over a year ago

same result is there

|

Collectives™ on Stack Overflow

Cannot show json data in dropdown list jquery

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related