Question

I already found some articles here on javascript objects But I don’t seem to get hang of it yet. I converted A JSON string to a javascript object as shown below.

public class LinePoint {
    public string Latitude { get; set; }
    public string Longitude { get; set; }
    public int Pointnumber { get; set; }
}

public class PolyLine {
    public List<LinePoint> LinePoints { get; set; }
    public int PolyLineNumBer { get; set; }
}

public class RootObject {
    public List<PolyLine> PolyLines { get; set; }
}

Because I want to get All the Latitude and Longitude properties per List Item to plot them as polylines in a Google map control I added below code to the initialization of the map. I just don’t know how to loop through the object.

Here’s my code so far.

var line = JSON.parse(document.getElementById('hdfPolyLines').value);
var path = [];

$.each( /* Listitem in rootobject */) {
    //  Parse the array of LatLngs into Gmap points
    for( /* each latlong in the list of listitems */ ){
        path.push(new google.maps.LatLng( // Latitude en Longitude properties from listitems */ ));
    }
    var polyline = new google.maps.Polyline({
        path: path,
        strokeColor: '#ff0000',
        strokeOpacity: 1.0,
        strokeWeight: 3
    });

    polyline.setMap(map);
});

Could someone help me out by showing me how to loop through the javascript object and getting the property values ?

Answer 1

You can use $.each for the loops, assuming you’re using jQuery. Something like this should work:

    var line = JSON.parse(document.getElementById('hdfPolyLines').value);

    $.each(line.PolyLines, function(polyLineIndex, polyLineValue) {

        var path = Array();

        $.each(polyLineValue.LinePoints, function (linePointIndex, linePointValue) {

            path.push(new google.maps.LatLng(linePointValue.Latitude, linePointValue.Longitude));
        });

        var polyline = new google.maps.Polyline({
            path: path,
            strokeColor: '#ff0000',
            strokeOpacity: 1.0,
            strokeWeight: 3
        });

        polyline.setMap(map);
    });