How to use model data in JavaScript: ASP.NET Core

Question

I have a list of objects that contain a lat and long for the marker positions. When I try to save the list of objects into an javascript var and read it out in a for loop it does nothing. I dont know where it goes wrong. What I tried to do was convert the list to an array, but even that didn't help. I checked the Model.Asparaguses value and it was fine, so that is not the issue here.

Here is my ViewModel:

public class FieldViewModel
{
    public Field Field { get; set; }
    public object[] ChartData { get; set; }
    public Asparagus[] Asparaguses { get; set; }
}

Here is my .js code in my view:

<script>
asparaguses = @Html.Raw(Json.Serialize(Model.Asparaguses));
</script>

And here is my external .js code:

var asparaguses;

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 51.25202200, lng: 5.710260 },
        zoom: 15
    });

    for (var i = 0; i < asparaguses.length; i++) {
        // Create a marker and set its position.
        var marker = new google.maps.Marker({
            map: map,
            position: { lat: asparaguses[i].Lat, lng: asparaguses[i].Long }
        });
    }
};

EDIT:

In my console I have this error:

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

When I log the array of Asparaguses then I get this output:

Asparaguses: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

And when I log the Lat and Long values from 1 asparagus, I see that they are 'Undefined'. But how?

Have you checked if the value is properly received from your ViewModel? So the first step would be to verify for example trought a simple console log that your var asparaguses in your js after setting it contains the values you expect? — Saltz, Sep 17 '18 at 15:15
@Saltz yes, in my viewmodel the list of asparaguses is correct. But in my console I see now that I have this error: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number — Svenmarim, Sep 18 '18 at 06:49
Show console output of asparaguses like console.log(asparaguses); — Nisfan, Sep 18 '18 at 07:12
@Nisfan here: Asparaguses: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object] But when I log a variable of 1 asparagus then the value is 'Undefined' — Svenmarim, Sep 18 '18 at 07:20
@Svenmarim I got my question answered just by looking at your question Mate. I wanted to know how to pass ViewModel into the external Javascript and your question answered it all. Thanks Buddy. :) — Vyas Senthil, Oct 26 '20 at 04:44

score 1 · Accepted Answer · answered Sep 18 '18 at 07:46

(Official answer derived from my comment)

After supplying the content of the variable trough the console the issue has become clear. Your Properties defined in your model are written in upper CamelCase as instructed by the coding and style rules of .NET.

JavaScript however uses the lower camelCase notation. So when you forcibly refer to your properties in upper CamelCase it will result in undefined.

So by changing all the references made to your properties in the lower camelCase notation your issue should be fixed.

TLDR

Use lower camelCase notation when referring to properties/ fields.

score 0 · Answer 2 · answered Sep 18 '18 at 08:46

I think instead of changing to camel case in the Viewmodel of the c# class you can add the JSONProperty annotation (using Newtonsoft.JSON) which will automatically convert the case of the field to the name in the jsonproperty before serializing like this

public class FieldViewModel
{
   [JsonProperty(PropertyName="field")]
   public Field Field { get; set; }

   [JsonProperty(PropertyName="chartData")]
   public object[] ChartData { get; set; }

   [JsonProperty(PropertyName="asparaguses")]
   public Asparagus[] Asparaguses { get; set; }
}

Alternatively you can use a ContractResolver that will convert all fields to the correct casing. See the link CamelCaseContractResolver for more information

I think you didn't understood it right. I didn't needed to change the camel case in my viewmodel. My properties are still with capital letters. Just when I REFER to the properties in Javascript I need to use normal letters. So the only thing I needed to change was ` asparaguses[i].Lat` to `asparaguses[i].lat` — Svenmarim, Sep 18 '18 at 09:22

How to use model data in JavaScript: ASP.NET Core

2 Answers2