converting a json string to one that fits a esri.geometry.Multipoint

Question

I have a webApi that returns a Json string

[{"MapEast":504743,"MapNorth":439624},{"MapEast":504736,"MapNorth":439622},{"MapEast":504775,"MapNorth":439722},{"MapEast":504739,"MapNorth":439738},{"MapEast":504774,"MapNorth":439715},{"MapEast":504739,"MapNorth":439734},{"MapEast":504773,"MapNorth":439711},{"MapEast":504739,"MapNorth":439728},{"MapEast":504773,"MapNorth":439705},{"MapEast":504739,"MapNorth":439724},{"MapEast":504773,"MapNorth":439699},{"MapEast":504743,"MapNorth":439718},{"MapEast":504773,"MapNorth":439694},{"MapEast":504743,"MapNorth":439713},{"MapEast":504776,"MapNorth":439688},{"MapEast":504742,"MapNorth":439708},{"MapEast":504773,"MapNorth":439680},{"MapEast":504743,"MapNorth":439703},{"MapEast":504774,"MapNorth":439674},{"MapEast":504742,"MapNorth":439698},{"MapEast":504773,"MapNorth":439668},{"MapEast":504743,"MapNorth":439693},{"MapEast":504773,"MapNorth":439663},{"MapEast":504740,"MapNorth":439688},{"MapEast":504773,"MapNorth":439658},{"MapEast":504742,"MapNorth":439679},{"MapEast":504775,"MapNorth":439653},{"MapEast":504742,"MapNorth":439676},{"MapEast":504743,"MapNorth":439670},{"MapEast":504742,"MapNorth":439665},{"MapEast":504742,"MapNorth":439660},{"MapEast":504741,"MapNorth":439656},{"MapEast":504741,"MapNorth":439650},{"MapEast":504741,"MapNorth":439645},{"MapEast":504740,"MapNorth":439640},{"MapEast":504741,"MapNorth":439634},{"MapEast":504740,"MapNorth":439631}]`

I need to figure out how to put this data to create a layer in an arcMap javascript api

function updateExtent(){
    var myMultiPoint = {
        "geometry":{
            "points":[[504743,439624],[504736,439622],[504775,439722]],
            "spatialReference":27700
        },
        "symbol":{
            "color":[255,255,255,64],
            "size":12,
            "angle":0,
            "xoffset":0,
            "yoffset":0,
            "type":"esriSMS",
            "style":"esriSMSCircle",
            "outline":{
                "color":[0,0,0,255],
                "width":1,
                "type":"esriSLS",
                "style":"esriSLSSolid"
            }
        }
    };  

    var gra = new esri.Graphic(myMultiPoint);

    myMap.graphics.add(gra);

    var graExtent = esri.graphicsExtent(myMap.graphics.graphics); 
    myMap.setExtent(graExtent); 
}

I have tested the above code an it works to create the layer and it works fine. I just need some guidance on how to get my json data from the webApi into the myMultiPoint variable creation.

Thanks

Answer 1

Use this to convert your JSON data to a points array:

var myData = JSON.parse('[{"MapEas... ...9631}]');

var points = myData.map(function(x){
    return [x.MapEast, x.MapNorth];
});

Then, you can simply add it in like this:

var myMultiPoint = {
    "geometry":{
        "points":points, // Just reference the array, here.
        "spatialReference":27700
    },
    "symbol":{
        "color":[255,255,255,64],
        "size":12,
        "angle":0,
        "xoffset":0,
        "yoffset":0,
        "type":"esriSMS",
        "style":"esriSMSCircle",
        "outline":{
            "color":[0,0,0,255],
            "width":1,
            "type":"esriSLS",
            "style":"esriSLSSolid"
        }
    }
};

Answer 2

You can convert json to esri.Geometry, using any of these ways:

• JsonUtils (esri/geometry/jsonUtils) or
• esri.geometry.fromJson method.

Here is the code:

METHOD ONE (USING JsonUtils)

require(
    ["esri/map", "esri/geometry/jsonUtils", "esri/config", "dojo/domReady!"],
    function (Map, JsonUtils, esriConfig) {

    var jsonGeometry = {"x":10,"y":20,"spatialReference":{"wkid":3857}};

    //Note: you should not use JsonUtils.fromJson(JSON.stringify(jsonGeometry))
    var geometry = JsonUtils.fromJson(jsonGeometry); 
    var graphic = new esri.Graphic(firstGeometry);
});

METHOD TWO (Using geometry.fromJson method)

var jsonGeometry = {"x":10,"y":20,"spatialReference":{"wkid":3857}};
var geometry = esri.geometry.fromJson(jsonGeometry);
var graphic = new esri.Graphic(geometry);