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
– Saltz, Commented Sep 17, 2018 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
– Svenmarim, Commented Sep 18, 2018 at 6:49
Show console output of asparaguses like console.log(asparaguses); — Nisfan
– Nisfan, Commented Sep 18, 2018 at 7: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
– Svenmarim, Commented Sep 18, 2018 at 7: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
– Vyas Senthil, Commented Oct 26, 2020 at 4:44

Saltz · Accepted Answer · 2018-09-18 07:46:01Z

1

(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.

answered Sep 18, 2018 at 7:46

Saltz

4135 silver badges18 bronze badges

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

Comments

user3785553 · Accepted Answer · 2018-09-18 08:46:52Z

0

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

answered Sep 18, 2018 at 8:46

user3785553

1216 bronze badges

1 Comment

Svenmarim Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related