Add options to dropdown via JQuery AJAX request (as json Object)

Question

I currently try to get into JQuery and, to be more specific, into AJAX requests.

Code:
Javascript:

success: function(json) {
        console.log(json);
        var $el = $("#system");
        $el.empty(); // remove old options
        $el.append($("<option></option>")
            .attr("value", '').text('Please Select'));

        // for each set of data, add a new option
        $.each(json, function(value, key) {
            $el.append($("<option></option>")
                .attr("value", value).text(key));
        });

},

HTML:

<form id="filter">
    <label for="datepicker">
        Date: <input id="datepicker" onchange="updateSystems()" type="text" />
    </label>
    &nbsp;
    <label>from:
        <select id="timespan-from"  name="timespan-from" onchange="updateSystems()" size="1">
            <option value="0">0 Uhr</option>
            ...
            <option value="23">23 Uhr</option>
        </select>
    </label>
    &nbsp;
    <label>to:
        <select id="timespan-to" name="timespan-to" onchange="updateSystems()" size="1">
            <option value="0">23 Uhr</option>
            ...
            <option value="0">0 Uhr</option>
        </select>
    </label>
    &nbsp;
    <label>in System:
        <select id="system" name="system" size="1">
            <!-- this should be updated -->
            <option>Amarr</option>
            <option>JEIV-E</option>
            <option>Jita</option>
            <option>Litom</option>
            <option>Penis</option>
        </select>
    </label>
</form>

This function is triggered whenever I change a field in my document, and should update the elements of a html dropdown.

The AJAX request works, but the dropdown-update does not work as intended. I try to add some <option> fields to the <select> dropdown with the id id=system.

However, the result dropdown always looks like this:

Please Select
[object Object]

What needs to be changed so my functions adds my json data to my dropdown menu?

Example JSON return from my php script:

[
    {
        "solarSystemID": "30001171",
        "solarSystemName": "F4R2-Q"
    },
    {
        "solarSystemID": "30001182",
        "solarSystemName": "MB-NKE"
    },
    {
        "solarSystemID": "30004299",
        "solarSystemName": "Sakht"
    },
    {
        "solarSystemID": "30004738",
        "solarSystemName": "1-SMEB"
    }
]

solarSystemID should become the value of the <option>,
solarSystemName should be the text.

Thanks in advance for any help, I guess I just need a little push in the right direction for it to finally work as intended.

When you debug, what are the values of key and value that you're using to build the option element(s)? It would appear that one of them is an object, not a literal value. — David
– David, Commented Sep 8, 2016 at 12:12
Please show all relevant code in the question itself. We shouldn't have to go off site to review your issue. Questions should be self contained — charlietfl
– charlietfl, Commented Sep 8, 2016 at 12:13
value would be 0..1..2..3 ... key would be an Object every time ... coerced to a string an object becomes [object Object] - by the way, jQuery.each callback arguments are key, value, not value, key - you're possibly thinking of Array#forEach — Jaromanda X
– Jaromanda X, Commented Sep 8, 2016 at 12:13
@charlietfl I will try to update my anwser so the JS code is actually in the post. You are totally right, the github-content will change and then the question becomes unclear. Will fix it now. — GosuSan
– GosuSan, Commented Sep 8, 2016 at 12:23

naortor · Accepted Answer · 2016-09-08 13:11:35Z

4

you can use the map method for mapping Solar object to option element.

$('#system').append(json.map(function(sObj){
    return '<option id="'+sObj.solarSystemID+'">'+ sObj.solarSystemName +'</option>'
}));

edited Sep 8, 2016 at 13:11

answered Sep 8, 2016 at 12:16

naortor

2,09714 silver badges26 bronze badges

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

3 Comments

Jaromanda X Over a year ago

I like this because it does a single append rather than an append for each item! which makes browsers happy :p

GosuSan Over a year ago

This works like a charm, thanks! However, there is a closing ) missing at the end!

naortor Over a year ago

fixed it , glad I could help :)

Collectives™ on Stack Overflow

Add options to dropdown via JQuery AJAX request (as json Object)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related