send array from controller to a view using JSON in MVC

Question

I have this code :

var mapcity = new Array([]); 
 $.ajax({
 type: 'GET',
 url: '/home/DrawMap',
 dataType: 'json',
 success: function (data) {
 var len = data.length;
 for (var i = 0; i < len; i++) {
 // mapcity['' + data[i].name + ''] = { center: new google.maps.LatLng(data[i].x, data[i].y), population: data[i].population, name: '' + data[i].name + '' };
 mapcity['' + data[i].name + ''] = { center: new google.maps.LatLng(data[i].x, data[i].y), population: data[i].population, name: ''+data[i].name+'' };
 //newarr[i] = data[i].name;
 alert(mapcity[0].population)
 }
 }
 });
}

This is a part of my code, and this is the function from controller :

public ActionResult DrawMap() { 
 string data = "[{ 'x':31.949454,'y': 35.932913,'population':50000,'name':'amman'},{ 'x':33.79,'y': 33.39,'population':100000,'name':'Zarqa'}]";
 data=data.Replace("'","\"");
 return this.Content(data, "application/json"); 
 }

When I run this, its het the JSON data from the controller but without saving it into the mapcity variable! And it does nothing. how can I solve it and what iam doing wrong?

• mothana: what is the syntax plx ?
• Nishant Jani: what is your backend ?
• mothana: iam using ASP.net MVC 4
• Nishant Jani: Response.Write(//you JSON data)

Answer 1

You should never be manually building JSON as you did but always use a JSON serializer:

public ActionResult DrawMap() 
{
 var data = new[]
 {
 new
 {
 x = 31.949454,
 y = 35.932913,
 population = 50000,
 name = "amman",
 },
 new
 {
 x = 33.79,
 y = 33.39,
 population = 100000,
 name = "Zarqa",
 }
 };
 return Json(data, JsonRequestBehavior.AllowGet);
}

Also you have declared your mapcity variable outside of the success handler which is leading me into thinking that you are attempting to use its value immediately after the $.ajax call which obviously is not possible because AJAX by its very own nature is asynchronous. This means that the success callback could be executed much later and the $.ajax call returns immediately.

So the only single safe place to use this variable is INSIDE the success function:

$.ajax({
 type: 'GET',
 url: '/home/DrawMap',
 success: function (data) {
 var mapcity = {};
 var len = data.length;
 for (var i = 0; i < len; i++) {
 mapcity['' + data[i].name + ''] = { center: new google.maps.LatLng(data[i].x, data[i].y), population: data[i].population, name: ''+data[i].name+'' };
 }
 }
});

You also have another problem. You declared mapcity variable as array (new Array([])) and then you attempted to insert non-integer indexes into it:

mapcity['' + data[i].name + '']

In javascript when you declare an array, it can only have 0 based integer indexes. So you could either declare it as a javascript object var mapcity = {}; or use integer indexes only.

Answer 2

Easiest way:

Your array of strings:

var data;
data.push('string1');
data.push('string2');
var jData = JSON.stringify(data); // convert to Json string
$.ajax({
 type: "POST",
 traditional: true,
 dataType: 'json',
 contentType: "application/json; charset=utf-8",
 url: "/Controller/MethodName",
 data: jData ,
 success: function (result) {
 if (result) {
 }
 }
});

Controller:

public ActionResult MethodName(List<String> jData )
{
 ....
 return Json(yourResult);
}