Appending this specific array to html select with JQuery

Question

I have the following script:

$(function () {
    var selectValues = new Array();
    selectValues = [{"Selected":false,"Text":"Apple","Value":"1"},{"Selected":false,"Text":"Samsung","Value":"2"},{"Selected":false,"Text":"LG","Value":"3"}];
    $.each(selectValues, function (key, value) {
        $('#brand-0')
             .append($('<option>', { value: key })
             .text(value))
             .prop("selectedIndex", -1);
    });
    });

But when it runs, it displays each list object as [object Object]. What am I missing?

You have an Array of Objects, so the `value` is the whole object. You need to choose which keys/values from the objects you actually need. I assume you want `.Text` for `.text()`, and `.Value` for `value`. — cookie monster, Apr 02 '14 at 18:04
...also, you can eliminate the `.text()` and `.prop()` calls, and just set all the data in the second argument to the element creation. — cookie monster, Apr 02 '14 at 18:06
the prop call is necessary for a different reason. I'm not sure how to rewrite this so that it works with the Objects — barnacle.m, Apr 02 '14 at 18:07
You can check this thread : http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery — Ashish, Apr 02 '14 at 18:08

cookie monster · Accepted Answer · 2014-04-02T18:14:23.830

As I noted above, you have an array of objects, so each value in the .each() loop is the current object. You need to extract the data appropriate for each placement in the new option element.

$(function () {
    var selectValues = [{"Selected":false, "Text":"Apple",  "Value":"1"},
                        {"Selected":false, "Text":"Samsung","Value":"2"},
                        {"Selected":false, "Text":"LG",     "Value":"3"}];
    var brand = $('#brand-0');

    brand[0].selectedIndex = -1;

    $.each(selectValues, function (i, value) {
        $('<option>', { 
             value: value.Value,
             text: value.Text
        }).appendTo(brand);

        if (value.Selected) {
            brand[0].selectedIndex = i;
        }
    });
});

And by the way, you don't need all those double quotes in the selectedValues objects.

var selectValues = [{Selected:false, Text:"Apple",  Value:"1"},
                    {Selected:false, Text:"Samsung",Value:"2"},
                    {Selected:false, Text:"LG",     Value:"3"}];

Yea the array is pulled from an MVC ViewBag of SelectList elements, can't help the quotes :P — barnacle.m, Apr 02 '14 at 18:18

score 1 · Answer 2 · answered Apr 02 '14 at 18:07

In your each loop, the parameter value contains one element of you array : {"Selected":false,"Text":"Apple","Value":"1"} for example.

Your need to specify which key of you object you want to display, otherwise you will display the whole object, which shows [object Object]

$(function () {
    var selectValues = new Array();
    selectValues = [{"Selected":false,"Text":"Apple","Value":"1"},{"Selected":false,"Text":"Samsung","Value":"2"},{"Selected":false,"Text":"LG","Value":"3"}];
    $.each(selectValues, function (key, value) {
    $('#brand-0')
        .append($('<option>', { value: value.key })
        .text(value.text))
        .prop("selectedIndex", -1);
    });
});

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

Handling object should be like this

$.each(selectValues, function (key, value) {
        $('#brand-0')
             .append($('<option>', { value:value.Value })
             .text(value.Text))
             .prop("selectedIndex", value.SelectedIndex);
    });

use example demo:

Fiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 02 '14 at 18:08

Manwal

23,450
12
63
93

Appending this specific array to html select with JQuery

3 Answers3

Fiddle