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, Jun 03 '20 at 05:37

ROOT · Accepted Answer · 2020-06-03T05:52:54.490

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>

score 0 · Answer 2 · answered Jun 03 '20 at 05:09

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 03 '20 at 05:09

Techie

44,706
42
157
243

Vivek Choudhary · Answer 3 · 2020-06-03T05:41:40.967

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 03 '20 at 05:41

answered Jun 03 '20 at 05:15

Vivek Choudhary

634
8
14

but now i'm getting: Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse – user3653474 Jun 03 '20 at 05:20
Give it a try now. – Vivek Choudhary Jun 03 '20 at 05:26
now it not throwing any error but a single object in dropdown is shown, when i console options i get {2: "Rod ", 3: "Adem"} – user3653474 Jun 03 '20 at 05:28
Just try to append option with your old approach or append the HTML directly. – Vivek Choudhary Jun 03 '20 at 05:35
same result is there – user3653474 Jun 03 '20 at 05:36
Try it now. Also, console.log(option.length) to know the object count. – Vivek Choudhary Jun 03 '20 at 05:44

Cannot show json data in dropdown list jquery

3 Answers3