CODEWITHSUNDEEP
jqueryjson
Heidel
Heidel

Reputation: 3254

Add options to select from JSON Object

I need to get possible options for select from another server, so I use AJAX, as result I get json and response.experience looks like

enter image description here

HTML

<select class="form-control" name="experience" id="experience"></select>

jQuery

$.ajax({
        method: 'GET',
        url: 'https://example.com/dictionaries/',
    })
    .done(function (response) {
        console.log(response.experience);

        $.each(response.experience, function (key, value) {
            $('#experience')
                .append($("<option></option>")
                    .attr("value", key)
                    .text(value));
        });
    });

But after append I get object Object in options

enter image description here

How to create options in my case? And how to add attr selected for the first option?

Upvotes: 0

Views: 137

Answers (3)

iamawebgeek
iamawebgeek

Reputation: 2865

You don't need to use $.each for going through an array, use array.forEach() or array.map() instead like this:

$.ajax({
        method: 'GET',
        url: 'https://example.com/dictionaries/',
    })
    .done(function (response) {
        console.log(response.experience);
        // using map
        $('#experience').append(
            response.experience.map(function (obj) {
                return $("<option/>")
                    .attr("value", obj.id)
                    .text(obj.name));
            })
        );
        // using forEach
        response.experience.forEach(function (obj) {
            $('#experience')
                .append(
                    $("<option></option>")
                        .attr("value", obj.id)
                        .text(obj.name)
                );
        });
    });

Upvotes: 1

CodeZombie
CodeZombie

Reputation: 2087

Edit:You are almost close to the solution.Please replace valuebyvalue.name in the option attributes.Here is the working code. 

   $.ajax({
        method: 'GET',
        url: 'https://example.com/dictionaries/',
    })
    .done(function (response) {
        console.log(response.experience);

        $.each(response.experience, function (key, value) {
            $('#experience')
                .append($("<option></option>")
                    .attr("value", value.name)
                    .text(value.name));
        });
    });

Upvotes: 1

Majar K
Majar K

Reputation: 34

You are iterating through the array which contains object and you are appending the objects to the select list. You may need to append one of the key of the object, example : 'id'. And the call back function of $.each function will accept two parameters, current index and value. The first parameter will be always index. Edit your ajax code as below : 

$.ajax({
    method: 'GET',
    url: 'https://example.com/dictionaries/',
})
.done(function (response) {
    console.log(response.experience);

    $.each(response.experience, function (index,value) {
        $('#experience')
            .append($("<option></option>")
                .attr("value", value.id) //To append id of the json object to select list
                .text(value.id));
    });
    $('#experience').val(response.experience[0].id) // To add the selected attribute for the first option
});

Upvotes: 1

Related Questions