How to parse json and show data in a dropdown button using Javascript?

Question

I have a JSON structure which looks like this

[
   {
      "term_id":"28",
      "name":"Audi",
      "slug":"audi",
      "term_group":"0"
   }
]

In my HTML page, I have a dropdown button where I want to show the name after the click. To do this I have some Javascript code which looks like this:

var serviceURL = "http://www.dohamark.com/samudra/";

var make;

$('#make1').bind('pageinit', function(event) {
    getEmployeeList();
});

function getEmployeeList() {
    $.getJSON(serviceURL + '1st.php', function(data) {
        $.each(data, function(index, employee) {
            $('#make1').append('<option>' + employee.name + '</option>');
        });
    });
}

However, this script shows nothing in the dropdown button click but a blank place. I am very new in JavaScript and don't know much about JSON parsing. Could somebody help identify my mistake?

Is the AJAX request actually successful. I ask because I wonder if the request is being made to a different domain than the one the webpage is running on. — Mike Brant
– Mike Brant, Commented Apr 1, 2013 at 16:26
As @MikeBrant mentioned. Check your console for errors. Copy-pasting the JSON content as string is working. Here is the fiddle http://jsfiddle.net/DJwv9/ — hjpotter92
– hjpotter92, Commented Apr 1, 2013 at 16:45

jk. · Accepted Answer · 2013-04-01 16:58:32Z

2

Try this:

$.each(data, function (index, employee) {
    $('#make1').append('<option>' + employee.name + '</option>');
});

Fiddle: http://jsfiddle.net/KYtph/2/

Your code is fine. Make sure it's not cross domain as other have suggested and that it's parsed correctly as json.

edited Apr 1, 2013 at 16:58

answered Apr 1, 2013 at 16:28

jk.

14.4k4 gold badges45 silver badges58 bronze badges

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

9 Comments

Reyjohn Over a year ago

Ok I will let you know after a try

jk. Over a year ago

@iGanja Employee is defined as a return variable in the each callback. You can use value as the jquery docs do or whatever you want.

iGanja Over a year ago

now that you have edited it, it makes sense. however, I never pass it to the controlling function, unless I need the index. which in this case, you don't.

jk. Over a year ago

@iGanja Not everybody grasps the concept of this and you're defining something that's already available in the callback. Not really hurting anything and it helps with clarification. Personal choice and not much of a performance hit.

iGanja Over a year ago

I don't make assumptions about the level of understanding of basic programming constructs. my bad.

|

talemyn · Accepted Answer · 2013-04-01 18:40:00Z

2

How about this:

for (var index in employee) {
    $('#make1').append($('<option>').text(employee[index].name));
});

If I am reading your question correctly, I think that should do it.

EDIT - Just to make sure that it's clear to the OP, when I am use the variable employee in the for in loop, that should reference the JSON that was returned.

edited Apr 1, 2013 at 18:40

answered Apr 1, 2013 at 16:57

talemyn

8,0004 gold badges33 silver badges52 bronze badges

7 Comments

Rafael Verger Over a year ago

Check this link bonsaiden.github.com/JavaScript-Garden/#object.forinloop about for ... in loop; Also, you're doing the same thing that he did, but with more code :S

talemyn Over a year ago

I've been using this same approach on a current project to do exactly what he is trying to do and from JSON feed to a new option. It works correctly across all browsers. I can see the point about the Prototype issue in the link, but if he is sure that his data is not going to fall into that situation, I'm not sure why it would be a problem.

talemyn Over a year ago

I'm also not sure how it is more code, I simplified the iteration by removing the entire function declaration . . .

Rafael Verger Over a year ago

In fact, the undesired behavior of for in loop happens when a map (an Object) is used as the element to be iterable. When an array is used, the variable x in for x in array works as the array index; so your code works without the hasOwnProperty, sorry about this. Just to be more semantic, I would edit your code to rename data as employees and employee as index, also caching the $("#make1") would be better for performace;

talemyn Over a year ago

Good point, that would better match the original code. And yeah, I was confused how an index (effectively) was going to cause a problem there. LOL Updating.

|

iGanja · Accepted Answer · 2013-04-01 16:52:48Z

0

I would write it like so:

$.each(data, function () {
    $('#make1').append('<option>' + this.name + '</option>');
});

Also, @Mike Bryant makes a good point; if you are going cross domain, this will never work without something like JSON-P.

answered Apr 1, 2013 at 16:52

iGanja

2,5263 gold badges30 silver badges33 bronze badges

Comments

ravisolanki07 · Accepted Answer · 2013-04-03 14:21:57Z

0

Please try following code :

    var dd = $("#make1");

    $(dd).empty();
    $(dd).append($('<option />').attr('value', '-1').text('-----Select----'));
     $.each(data, function(index, employee) {
        dd.append($('<option />').attr('Value',employee.ID).text(employee.Name));
    });

answered Apr 3, 2013 at 14:21

ravisolanki07

6473 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to parse json and show data in a dropdown button using Javascript?

4 Answers 4

9 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related