topic Re: Convert a graphicsLayer to JSON in ArcGIS JavaScript Maps SDK Questions

Convert a graphicsLayer to JSON

SowjanyaSunkara — Fri, 03 Feb 2012 23:25:15 GMT

Is there a way to convert an entire GraphicsLayer to JSON?
I was able to use dojo.toJson(graphics.toJson()) and convert individual graphics from a GraphicsLayer to JSON, so could anyone throw light on how to convert the entire layer to JSON?
I'm trying to store/save the JSON format of a graphics layer and then re-load it back to the user.

Thnx in adavance,
SS.

Re: Convert a graphicsLayer to JSON

derekswingley1 — Fri, 03 Feb 2012 23:44:23 GMT

Unfortunately, no, graphics layers do not have a toJson() method.

Can you switch to using a feature layer? Those do have a toJson() method which would do exactly what you want.

Re: Convert a graphicsLayer to JSON

SowjanyaSunkara — Mon, 06 Feb 2012 14:22:03 GMT

Derek - Thanks for the prompt response. The reason for using a graphics layer is to save the user drawn graphics (Sketch/Pushpins), on the server and load it back when needed.
So do I have to convert individual graphics and save them on the server or is there an other way around?

Re: Convert a graphicsLayer to JSON

derekswingley1 — Mon, 06 Feb 2012 14:59:19 GMT

If you want to stick with a graphics layer, then you'll have to loop through the array of graphics and call dojo.toJson(graphic.toJson()) to get a text string you can push back to the server to be saved.

Re: Convert a graphicsLayer to JSON

SowjanyaSunkara — Mon, 06 Feb 2012 15:33:36 GMT

Thanks Derek.

Re: Convert a graphicsLayer to JSON

SowjanyaSunkara — Wed, 15 Feb 2012 17:02:16 GMT

So, I successfully saved all map graphics (sketches/pushpins) on the server but was having no luck re-drawing them back on the map.
var sk = new esri.Graphic(sketches);
map.getLayer("importSketchLayer").add(sk);

and a sample sk ={"geometry":{"rings":[[[2479931.879726085,7106033.410997431],[2480065.4169330294,7106050.981682555],[2480110.222180096,7105950.828777347],[2480014.461946169,7105920.958612636],[2479931.879726085,7106033.410997431]]],"spatialReference":{"wkid":2276}},"attributes":{"sketchType":"shape"},"symbol":{"color":[255,255,102,255],"outline":{"color":[192,0,0,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}

Am I missing something?

Re: Convert a graphicsLayer to JSON

derekswingley1 — Wed, 15 Feb 2012 20:10:31 GMT

That looks like it should work. What's the spatial reference for your map? Are there any errors after you call add()?

Re: Convert a graphicsLayer to JSON

SowjanyaSunkara — Wed, 15 Feb 2012 21:07:53 GMT

There are no errors. I donot see the graphics on the map.
In debug, I noticed that geometry values for sk is returned as "null" after the assignment
var sk = new esri.Graphic(sketches);

where

sketches={"geometry":{"rings":[[[2479931.879726085,7106033.410997431],[2480065.4169330294,7106050.981682555],[2480110.222180096,7105950.828777347],[2480014.461946169,7105920.958612636],[2479931.879726085,7106033.410997431]]],"spatialReference":{"wkid":2276}},"attributes":{"sketchType":"shape"},"symbol":{"color":[255,255,102,255],"outline":{"color":[192,0,0,255],"width":0.75,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}

my map.SpatialReference wkid: 2276

Re: Convert a graphicsLayer to JSON

SowjanyaSunkara — Thu, 16 Feb 2012 23:14:08 GMT

I fixed it. I had to do a eval on the json returned so geometry and symbol are not null.

var temp = eval("("+ sketches + ")");
var sk = new esri.Graphic(temp);
map.getLayer("sketchLayer").add(sk);

Re: Convert a graphicsLayer to JSON

derekswingley1 — Thu, 16 Feb 2012 23:42:57 GMT

How are you getting the JSON from the server? If you use dojo.io.script.get or dojo.xhrGet (with handleAs: "json") you wouldn't need to do the eval (it's done inside the dojo functions).

Re: Convert a graphicsLayer to JSON

SowjanyaSunkara — Fri, 17 Feb 2012 20:16:01 GMT

After converting the sketches to Json, I store each graphic as a datatable inside a XML dataset on the server.
And to read the Json back, I'm reading the XML file contents to a string variable.

Re: Convert a graphicsLayer to JSON

derekswingley1 — Fri, 17 Feb 2012 20:51:42 GMT

Nevermind then.

Re: Convert a graphicsLayer to JSON

hcgis — Thu, 02 Aug 2012 07:37:04 GMT

Hi Sowjanya,
How did you store graphics in the database, can you explain more details?
thanks

Re: Convert a graphicsLayer to JSON

ReneRubalcava — Thu, 02 Aug 2012 12:38:19 GMT

I actually do this a lot.
Geometry has a toJson() method, notice the lowercase "son", you guys just had to be different 😉
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/geometry.htm#toJson
I then do a jsonObject.toString() and store this in a string field that gets saved in a SQL table field along with any other data that's required.

Then when I get my results from the db, I take that field and convert it to JSON using dojo or jquery or JSON.parse(). I'd avoid using eval if a public facing site, too risky, but once you have the JSON object of the geometry you saved, you can now convert it to a real Geometry with esri.geometry.fromJson.
http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi/namespace_geometry.htm#fromJson

Then you can create your graphics to show on the map.
t's fast, simple and efficient for basic needs.

Re: Convert a graphicsLayer to JSON

hcgis — Thu, 02 Aug 2012 14:09:42 GMT

hi Rene,
thank you for your help, can you explain deeply how to save in the SQL table from the javascript application an can you provide a sample for that
many thanks

Re: Convert a graphicsLayer to JSON

ReneRubalcava — Sat, 11 Dec 2021 07:18:08 GMT

I don't really use dojo.xhr too often to do my CRUD, but it should look similar to this.

updateData = function(graphic) {
 var _args, attr, data, geom;
 attr = graphic.attributes;
 // JSON methods may not be available in all browsers
 // I think dojo.toJson(obj).toString() will
 // do the same thing.
 geom = JSON.stringify(graphic.geometry.toJson());
 data = {
  "Geometry": geom
 };
 _args = {
  // my .net service will handle the writing
  // to sql server
  url: "api/service/" + attr.id,
  postData: data,
  handleAs: "json"
 };
 // I think you'd use xhrRawPost for json data,
 // I'm not clear on this one.
 return dojo.xhrRawPost(_args);
};

Then to read the updated data at a later time.

graphics = []; // array that will hold my graphics
// results would be the response from
// from a REST request via dojo xhr or jquery ajax
dojo.forEach(results, function(result) {
 var g, res_geom, res_obj;
 // result is JSON, but Geometry is a string field
 // convert string field to JSON object
 res_obj = dojo.fromJson(result.Geometry);
 // convert json to geometry
 res_geom = esri.geometry.fromJson(res_obj);
 //create my graphic
 g = new esri.Graphic(res_geom, symbolHelper.lineSymbol(), {
   "Id": attribute.Id,
   "WorkOrderId": attribute.WorkOrderId
 });
 return graphics.push(g);
});
// In this case, I update a FeatureLayer, but you can easily just add
// graphics to a GraphicsLayer
prev_graphics = lineFeatures.graphics;
lineFeatures.applyEdits(graphics, null, prev_graphics);

Hope that helps a bit, I tweaked some stuff from a project for this example to simplify it a bit, but not too much.

Re: Convert a graphicsLayer to JSON

hcgis — Thu, 02 Aug 2012 16:30:27 GMT

Are you storing graphics in a geodatabase or in other spatial databases

Re: Convert a graphicsLayer to JSON

ReneRubalcava — Thu, 02 Aug 2012 16:36:20 GMT

I just store them as strings in a SQL table. No spatial or gdb. In this case, it wasn't needed.

Re: Convert a graphicsLayer to JSON

hcgis — Thu, 02 Aug 2012 17:10:12 GMT

OK, how to store it as geometry or geography type in SQL server
thank you for your reply

Re: Convert a graphicsLayer to JSON

RobertMEIER — Sat, 11 Dec 2021 07:18:11 GMT

Just thought I'd chime in on this, writing multiple Graphics as JSON to a file.

I spent the last couple of hours looking around at the forums and other online sources and came up with this:

//using jquery to loop through the graphics:

        var jsonval = "{";

        $.each(markupGrfLayer.graphics, function (index, grf) {
            var junk = grf.toJson();
            jsonval += "\"" + index + "\":" + dojo.toJson(junk) + ",";
        });

        jsonval = jsonval.substring(0, jsonval.length - 1); //trim comma
        jsonval += "}";

// this creates a string that looks like this:

"{"0":{"geometry":{"x":-12659674.40398411,"y":5195776.256527749,"spatialReference":{"wkid":102100}},
"symbol":{"color":[204,153,204,255],"size":3.75,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle",
"outline":{"color":[153,255,153,255],"width":2.25,"type":"esriSLS","style":"esriSLSSolid"}}},
"1":{"geometry":{"x":-12547159.098348362,"y":5210452.165958499,"spatialReference":{"wkid":102100}},"symbol":{"color":[204,153,204,255],
"size":3.75,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle","outline":{"color":[153,255,153,255],"width":2.2,
"type":"esriSLS","style":"esriSLSSolid"}}}}"

Write this to a file how ever you'd like.

Read the string from file however you'd like, recreate the graphics and add the to the graphics layer:

              var jsString = stringFromFile;
               var val = $.parseJSON(jsString);

               $.each(val, function (key, value) {
                  var gra = new esri.Graphic(value);
                  markupGrfLayer.add(gra);
               });

That's it!

I hope someone finds this useful!

-bert