CODEWITHSUNDEEP
javascriptc#google-mapsasp.net-core-mvc
Svenmarim
Svenmarim

Reputation: 3735

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

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?

Upvotes: 1

Views: 4207

Answers (2)

user3785553
user3785553

Reputation: 121

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

Upvotes: 0

Saltz
Saltz

Reputation: 413

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

Upvotes: 1

Related Questions