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
– cookie monster, Commented Apr 2, 2014 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
– cookie monster, Commented Apr 2, 2014 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
– barnacle.m, Commented Apr 2, 2014 at 18:07
You can check this thread : stackoverflow.com/questions/170986/… — Ashish
– Ashish, Commented Apr 2, 2014 at 18:08

cookie monster · Accepted Answer · 2014-04-02 18:14:23Z

2

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"}];

edited Apr 2, 2014 at 18:14

answered Apr 2, 2014 at 18:07

cookie monster

11k4 gold badges33 silver badges45 bronze badges

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

1 Comment

barnacle.m Over a year ago

Yea the array is pulled from an MVC ViewBag of SelectList elements, can't help the quotes :P

Sylvain · Accepted Answer · 2014-04-02 18:07:59Z

1

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);
    });
});

answered Apr 2, 2014 at 18:07

Sylvain

3,8731 gold badge30 silver badges32 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 2, 2014 at 18:08

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Collectives™ on Stack Overflow

Appending this specific array to html select with JQuery

3 Answers 3

1 Comment

Comments

Fiddle

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related