Cannot get values from JSON array object

Question

With JSON.stringify I can see that I have my data, but for the life of me how can one loop and get the values, I want to get back lat and lng and pass them to setMark() thats commented out for now.

function setMarkers(map) {
    var data = {
        optStatus: $("input[name='optStatus']:checked").attr("id"),
        sortOrder: $('#sortOrder').val()
    };
    var sTemp = "";

    $.ajax({
        type: 'GET',
        url: '/MeterReadsDue/getMarkers',
        async: true,
        dataType: 'json',
        success: function (data) {

            var myArray = data;
            $("#test1").append(JSON.stringify(data));

            //setMark(map,lat,lng);
        }
    });
}

The DIV output is the JSON stringified text below...

{
  "ContentEncoding": null,
  "ContentType": null,
  "Data": "[{'lat':55.86001,'lng':-4.24842,'content':'08ELSTER-X06A245926'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER11W722962'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER13M412917'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER14H760382'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER10M097604'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER11M763299'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER13W700357'},{'lat':55.86001,'lng':-4.24842,'content':'07100043500A012550'},{'lat':55.86001,'lng':-4.24842,'content':'07100043675521477'},{'lat':55.86001,'lng':-4.24842,'content':'07100330200M018100'},{'lat':55.86001,'lng':-4.24842,'content':'07100043582490025'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER04M227373'},{'lat':55.86001,'lng':-4.24842,'content':'08ELSTER-X88388817'},{'lat':55.86001,'lng':-4.24842,'content':'07100037098W006075'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER04M378296'},{'lat':55.86001,'lng':-4.24842,'content':'07100037187608261'},{'lat':55.86001,'lng':-4.24842,'content':'07100043587074857'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER83246929'},{'lat':55.86001,'lng':-4.24842,'content':'07100330205M086806'},{'lat':55.86001,'lng':-4.24842,'content':'06ELSTER07A091225'}]",
  "JsonRequestBehavior": 1,
  "MaxJsonLength": null,
  "RecursionLimit": null
}

Answer 1

If you look at the outputted JSON, you can see that the Data property contains a string which contains another JSON-like string. Unfortunately, it’s not valid JSON itself as it uses single quotes instead of double quotes for strings. But you’re lucky that your particular output format does not seem to contain double quotes ever, so you can replace them first and then parse it:

success: function (data) {
    var realData = data.Data.replace(/'/g, '"'); // replace single by double quotes
    realData = JSON.parse(realData); // parse JSON

    $("#test1").append(JSON.stringify(realData));

    // realData is an array of objects, so iterate over it
    realData.forEach(function (marker) {
         setMark(map, marker.lat, marker.lng);
    });
}