How to read object back from dropdown

Question

I am using JavaScript.

I make an api call to get a list of class objects (asp.net mvc c#).

I enumerate through this list in JavaScript and set and add items to my dropdown.

When I click a button I want to get the selected item and parse/read/cast back the class object but I get an undefinded error.

This is my model:

public  class SubscriptionLookUp
{
    public string SubscriptionType { get; set; }
    public int SubscriptionTypeId { get; set; }
    public double UnitCost { get; set; }
    public string ErrorMessage { get; set; }
}

This is my ajax call:

$.ajax({
    url: "https://mydomain/SubscriptionLookUp?currentSubscription"
    type: "GET",
    crossDomain: true,
    dataType: 'jsonp',
    jsonp: 'callback',
    success: function (data) {
          $("#cboAvailableSubscriptions").empty();
        $("#cboAvailableSubscriptions").append($("<option></option>").val('').html('Please Select'));
        $.each(data, function (key, item) {

            if (item.ErrorMessage !== '' && item.ErrorMessage!==null) {
                $('#divError').html('Server Error');
                return;
            }
            $("#cboAvailableSubscriptions").append($("<option></option>").val(item).html(item.SubscriptionType));
        })                                    },
    error: function (jqXHR, textStatus, errorThrown) {
          $("#divError").html('Server Error');
    }
});

Which is populated just fine and this is my final bit to read teh object back:

$('#divChange').click(function () {

    var SubscriptionLookUp = {
        SubscriptionType: '',
        SubscriptionTypeId: '',
        UnitCost: '',
    };
    SubscriptionLookUp = $("#cboAvailableSubscriptions").val();

    alert(SubscriptionLookUp.SubscriptionType);
});

The alert returns undefined...

@EhsanSajjad thanks for your comment but that will return the whole object. i am trying to read the property from that object — Andrew Simpson
– Andrew Simpson, Commented Feb 17, 2016 at 18:46
SubscriptionLookUp.SubscriptionType = $("#cboAvailableSubscriptions").val() — Ehsan Sajjad
– Ehsan Sajjad, Commented Feb 17, 2016 at 18:51
@EhsanSajjad thanks but that did not work. Just to confirm the 'item' i am adding is the class object. — Andrew Simpson
– Andrew Simpson, Commented Feb 17, 2016 at 18:54

jtrumbull · Accepted Answer · 2016-02-17 19:38:07Z

2

$.val() uses Object.prototype.toString.call(value), which is converting your item to the string [Object object] (you can see this by viewing the source of your generated html). So, when trying to read the property SubscriptionType, JavaScript is referencing the String.prototype, not your item -therefore undefined.

With little change to your code, you could use JSON.stringify and JSON.parse:

Writer

$("#cboAvailableSubscriptions").append(
  $("<option></option>").val(JSON.stringify(item))
                        .html(item.SubscriptionType)
);

Reader

SubscriptionLookUp = JSON.parse($("#cboAvailableSubscriptions").val());

You may want to look into $.data(), seems like the right tool for the job.

answered Feb 17, 2016 at 19:38

jtrumbull

8189 silver badges19 bronze badges

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

Comments

Slippery Pete · Accepted Answer · 2016-02-17 19:47:28Z

1

You can use data() instead of val():

$("#cboAvailableSubscriptions").append($("<option></option>").data("itemKey", item).html(item.SubscriptionType));

And to retrieve it:

$('#divChange').click(function () {

    var SubscriptionLookUp = {
        SubscriptionType: '',
        SubscriptionTypeId: '',
        UnitCost: '',
    };
    SubscriptionLookUp = $("#cboAvailableSubscriptions").find(":selected").data("itemKey");

    alert(SubscriptionLookUp.SubscriptionType);
});

answered Feb 17, 2016 at 19:47

Slippery Pete

3,1101 gold badge16 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to read object back from dropdown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related