How to access object properties in javascript?

Question

I am passing an object(model) in View where I have javascript code written. The object has certain properties that I want to access in javascript in order to create a drop down list from the values of those properties. Here is my object:

public class TestObject
{
    public BuildData ExteriorColor { get; set; }
    public BuildData InteriorColor { get; set; }
 }

and

public class BuildData
{
    public List<ExteriorInteriorData> Data { get; set; }
    public bool isInstalled { get; set; }
    public BuildData()
    {
        Data = new List<ExteriorInteriorData>();
    }
}

Now in the View I have an object of TestObject through ViewData and I want to populate the values present in List<ExteriorInteriorData> in a select list. Basically I want to do something like this:

for (var i = 0; i < data.ExteriorColor.Data.length; i++) {
            $("#Exterior_Color").append($("<option " + (i == 0 ? "selected" : "") + "></option>").val(data.ExteriorColor.Data[i].ColorName + ", " + data.ExteriorColor.Data[i].RgbValue).html(data.ExteriorColor.Data[i].ColorName));
    }

So, How do I access the object TestObject present in Viewdata inside of Javascript?

since this is MVC you could just use a loop in Razor to do this, no need for Javascript by the looks of it. — ADyson
– ADyson, Commented Jan 8, 2018 at 9:40
Using javascript for this is crazy (do some basic reasearch on creating a dropdownlist in MVC using the @Html.DropDownListFor() method). But to answer your question - var model = @Html.Raw(Json.Encode(Model)) converts you model to a javascript object. — user3559349
– user3559349, Commented Jan 8, 2018 at 9:42
@ADyson How do I access the id of the select list by ID in the razor query? — testacc
– testacc, Commented Jan 8, 2018 at 10:03
@Nirman I am not passing the value in Model, it is in ViewData. So, how do I get the value from there — testacc
– testacc, Commented Jan 8, 2018 at 10:04

Muhammad Asad · Accepted Answer · 2018-01-08 10:18:28Z

1

if you are writing JavaScript in same view then you just need to convert your model object in js object using this code.

var jsModel = @Html.Raw(Json.Encode(Model))

if you want in external file then create an html element and set this model in data- field and get this model in js like this

View

<div data-JsObject="@Html.Raw(Json.Encode(Model))" id="JSOBJ"> </div>

JS External file

var list = JSON.parse($("#JSOBJ").data("JsObject"))

I hope it'll work for you.

answered Jan 8, 2018 at 10:18

Muhammad Asad

1,79216 silver badges25 bronze badges

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

Comments

Amirhosein Ghasemi · Accepted Answer · 2018-01-08 10:27:15Z

0

except of javascript you can use defualt razor helper for create dropdownlist :

@Html.DropDownListFor(model => model.ExteriorColor.Data, new SelectList(Model.ExteriorColor.Data, "Value", "Text"))

repale Value and Text By properties in ExteriorInteriorData

answered Jan 8, 2018 at 10:27

Amirhosein Ghasemi

263 bronze badges

Comments

Eva Lai · Accepted Answer · 2018-01-08 10:32:48Z

0

Try this. Use for loop within the tag.

@model [yourproject].Models.TestObject
<select id="Exterior_Color" name="Exterior_Color">
    @foreach (var item in this.Model.ExteriorColor)
    {
        <option value="@item.RgbValue">@item.ColorName</option>
    }
</select>

You can simply get selected item from javasrcipt

$("#Exterior_Color").val();

answered Jan 8, 2018 at 10:32

Eva Lai

986 bronze badges

Collectives™ on Stack Overflow

How to access object properties in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related