Parse JSON from text field to Array of objects

Question

I'm having quit a problem with parsing some JSON data to the original Array of Objects, here is what appens I have this original data (JavaScript) for example:

var points = [];
points = [
    { lat: "38.713852", lng: "-9.145621", data: "<div align=left class=gMapsOverlay><span>Loja centro de Braga</span></div>", options: { icon: '../layout/icon_map_point.png' } },
    { lat: "39.825751", lng: "-7.479642", data: "<div align=left class=gMapsOverlay><span>Apartamento T3</span></div>", options: { icon: '../layout/icon_map_point.png' } },
    { lat: "38.730638", lng: "-9.139604", data: "<div align=left class=gMapsOverlay><span>Apartamento Duplex</span></div>", options: { icon: '../layout/icon_map_point.png' } }
];

And I have to do this exactly as im trying to explain, I need to send it to and hidden field with the ID="hdd_GmapPoints" (in this case), I do it like this:

private void SetMap () {
    string aux = "";
    string[] lat = new string[3];
    string[] lng = new string[3];
    string[] designacao = new string[3];

    lat[0] = "38.713852";
    lat[1] = "39.825751";
    lat[2] = "38.730638";

    lng[0] = "-9.145621";
    lng[1] = "-7.479642";
    lng[2] = "-9.139604";

    designacao[0] = "Loja centro de Braga";
    designacao[1] = "Apartamento T3";
    designacao[2] = "Apartamento Duplex";

    for(int i = 0; i < lat.Length; i++) {
        aux += "{ lat: \"" + lat[i].ToString().Replace(",", ".") + "\",  " +
               "lng: \"" + lng[i].ToString().Replace(",", ".") + "\", " +
               "data: \"<div align=left class=gmapsoverlay><span>" + designacao[i] + "</span></div>\", " +
               "options: { icon: '../layout/icon_map_point.png' } },";

        //aux[idx] = "{ lat: \"" + r["latitude"].ToString().Replace(",", ".") + "\",  " +
        //           "lng: \"" + r["longitude"].ToString().Replace(",", ".") + "\", " +
        //           "data: '<div align=left class=gMapsOverlay><span>" + r["designacao"] + "</span></div>', " +
        //           "options: { icon: '../layout/icon_map_point.png' } }";
    }

    if(aux != "") {
        //hdd_GmapPoints.Value = aux.ToString();
        //hdd_GmapPoints.Value = aux.Substring(0, aux.Length - 1);

        var jsonSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        string json = jsonSerializer.Serialize(aux.ToString().Substring(0, aux.ToString().Length - 1));
        hdd_GmapPoints.Value = json;

    }
}

Then I have to parse this back to a Javascript Array of Objects, here is my javascript code:

function setMap() {

    var points = [];

    points = [
            { lat: "38.713852", lng: "-9.145621", data: "<div align=left class=gMapsOverlay><span>Loja centro de Braga</span></div>", options: { icon: '../layout/icon_map_point.png' } },
            { lat: "39.825751", lng: "-7.479642", data: "<div align=left class=gMapsOverlay><span>Apartamento T3</span></div>", options: { icon: '../layout/icon_map_point.png' } },
            { lat: "38.730638", lng: "-9.139604", data: "<div align=left class=gMapsOverlay><span>Apartamento Duplex</span></div>", options: { icon: '../layout/icon_map_point.png' } }
        ];

        //points = [str1.split('%')];


        var aux = $("#<%=hdd_GmapPoints.ClientID %>").val();
        var points2 = eval(aux);
        //var points2 = JSON.parse(aux);

        console.log("TYPE 1: " + $.type(points));
        console.log("CONTENT 1:" + points);
        console.log("TYPE 2: " + $.type(points2));
        console.log("CONTENT 2:" + points2);
        console.table(points);
}

but it doesn't work because it shows me the supose object as a string, this is what i get from console.log(points2);

"{ lat: "38.713852", lng: "-9.145621", data: "Loja centro de Braga", options: { icon: '../layout/icon_map_point.png' } },{ lat: "39.825751", lng: "-7.479642", data: "Apartamento T3", options: { icon: '../layout/icon_map_point.png' } },{ lat: "38.730638", lng: "-9.139604", data: "Apartamento Duplex", options: { icon: '../layout/icon_map_point.png' } }"

and I need this to give what the

console.table(points);

gives

Again I need to send this from c# to JQuery by the hiddenfield, the code must pass by that hiddenfield.

Does any one know something?

Answer 1

Ok sorry for taking your time everyone, but i found the solution, since i'm not very good at c# i didn't expected this to work but it worked.

What i did was literally create the object at code behind, this way i fully passe the whole object from c# to javascript with JSON.

//declared this 2 classes at the top
class Options {
    public string icon {
        get;
        set;
    }
}

class Aux {
    public string lat {
        get;
        set;
    }
    public string lng {
        get;
        set;
    }
    public string data {
        get;
        set;
    }
    public Options options {
        get;
        set;
    }
}

private void SetMap () {
    Options opt = new Options();
    List<Aux> aux = new List<Aux>();

    //this is to make the code to work with dinamic content
    string[] latitude = new string[3];
    string[] longitude = new string[3];
    string[] designacao = new string[3];

    latitude[0] = "38.713852";
    latitude[1] = "39.825751";
    latitude[2] = "38.730638";

    longitude[0] = "-9.145621";
    longitude[1] = "-7.479642";
    longitude[2] = "-9.139604";

    designacao[0] = "Loja centro de Braga";
    designacao[1] = "Apartamento T3";
    designacao[2] = "sxpto";

    for (int i=0; i< 3; i++){
        opt.icon = "../layout/icon_map_point.png";

        //this is what it's really needed
        aux.Add(new Aux {lat = latitude[i], lng = longitude[i], data = "div align=left class=gmapsoverlay><span>"+designacao[i]+"</span></div>", options = opt});
    }
    // end of dinamic content

    if(aux != null) {
        //parse the whole object to JSON
        var jsonSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        string json = jsonSerializer.Serialize(aux);
        hdd_GmapPoints.Value = json;

    }

}

in the javascript side, simply have to decode the hidden field

var aux = $("#<%=hdd_GmapPoints.ClientID %>").val();
var points2 = JSON.parse(aux);