To implement json do you load something first

[Claus Mygind]

In the following example I stop at ".toJSONString( )"

I have read all the articles on formatting JSON objects and arrays and I understand how it is a subset of JavaScript. But I have not been able to find a small (complete html page with headers) example. only small snippets of code, so it is hard to get the whole picture.

Can someone point me to a complete example

    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    var url = '/SXYZ/projectLayout2.exe?timeStamp=' + new Date().getTime();
    request.open("POST", url, true);
    request.onreadystatechange = updatePage;
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.send(myJrec.toJSONString());

[gits]

here is nearly everything noteworthy about JSON - http://json.org/ - what is your exact problem? you have JavaScript arrays/objects and want to write a function that creates a valid JSON-string from it?

[Claus Mygind]

Thank you for your reply. The reference you sent to json.org is where I started and I also read this material https://www.ibm.com/developerworks/w...a-ajaxintro10/

However both lack a complete example of how to set up json. I understand the basic concept but there must be a library that gets installed. At first my impression was that modern browsers included json much like they include javaScript but that does not appear to be the case.

You ask what am I attempting to do.

I am looking for the best method to send data to the web server with the least amount of overhead. json seemed to be the best alternative.

Here I what I want to send. Basically there are only 3 pieces of information, however each piece contains variable amounts of data.

The user's computer (client) consists of a Google map and a data panel. The user will outline a job site and identify features on the job site with push pins. There will be a polygon (the job site) with variable number of sides, point coordinates and an identifier for each feature (push pin) placed on the job site.

POLYGON((
41.750642265243 7 -88.152407335968 04,
41.748240946176 2 -88.157814669342 06,
41.748016818480 22 -88.152450251312 27))

array of feature point
pinArray
0
position "41.74843305500 714, -88.156398462982 2"

1
position "41.74849709115 636, -88.154767679901 14"

2
position "41.74955367839 665, -88.153823542327 9"

3
position "41.74852910920 703, -88.153694796295 18"

array of feature objects descriptions
0
feature "Point 1"
pinColor "red"

1
feature "Point 2"
pinColor "blue"

2
feature "Point 3"
pinColor "green"

3
feature "Point 4"
pinColor "yellow"

Here is my code so far

//save layout section
function saveLayout() {

  /*
    vertices contains more info than needed so
    only transmit coordinates in a format that
    mySQL can store in a polygon field
  */
  var vertices = poly.getPath();
  var jobSite = "POLYGON((";

  // get job site location.
  for (var i =0; i < vertices.length; i++) {
     var xy = vertices.getAt(i);
     jobSite += xy.lat() +" " + xy.lng() +",";
  }
  jobSite = jobSite.substring(0,jobSite.lastIndexOf(","))+"))";

  //get marked features on job site
  var featureAttrib = "";
  var featurePoints = "";
  for (var i = 0; i < markersArray.length; i++ )
  {
    featurePoints += markersArray[i].position+",";
        featureAttrib += {"FEATURE": exchangeArray[i].feature, "ICON": exchangeArray[i].iconColor };
  }
    
  featureAttrib = featureAttrib.substring(0,featureAttrib.lastIndexOf(","));

  featurePoints = featurePoints.substring(0,featurePoints.lastIndexOf(","));

  var myJrec  = {"JOBSITE" : jobSite};
  myJrec += {"FEATUREATTRIB": [featureAttrib] };
  myJrec += {"FEATUREPOINTS" : featurePoints};

  var request = window.ActiveXObject ?
		new ActiveXObject('Microsoft.XMLHTTP') :
	    new XMLHttpRequest;

  var url = '/SXYZ/projectLayout2.exe?timeStamp=' + new Date().getTime();
	request.open("POST", url, true);
	request.onreadystatechange = updatePage;
	request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	request.send(myJrec.toJSONString());

}

function updatePage()
{
	alert("complete");
}

Please disregard other errors in my coding for now. I am only interested in how I might be able to send via "Post" and ajax request in a json format to the server.

It appears from what I have read, you can format the data into a json format style ie: arrays, then stringify the data again in a json style (see my original post on top), but that is not the case.

Again is there a small example that shows all the code necessary to successfully transmit json data including any header link to outside libraries?

[Claus Mygind]

Ok I think I got it.
1) From http://www.json.org/js.html
2) Under javaScript click on the json2.js
3) Go to bottom of page and click on "The open source code of a JSON parser and JSON stringifier is available."
4) Save the displayed content to your computer.
5) Minify the file
6) and link it to your app.

Then all the code snippet examples will work.