how to pass c# datatable to a javascript function

Question

I have these data in thhe codebehind and tried to pass it to javascript function in various formats: array of list, json string but no way to get data by a javascript var object.

Here is the last format of data in the code behind:

List<string>[] array2 = new List<string>[listLenght];
array2.Initialize();

for (int ii = 0; ii < listLenght; ii++)
{
    array2[ii] = new List<string>();
    array2[ii].Add(Convert.ToString(dt.Rows[ii][5]));
    array2[ii].Add(Convert.ToString(dt.Rows[ii][9]));
    array2[ii].Add(Convert.ToString(dt.Rows[ii][10]));
    array2[ii].Add(Convert.ToString(dt.Rows[ii][11]));
}

Then tried to call javascript in this way:

string createArrayScript = string.Format("var array2 = [{0},{1},{2},{3}];", 
string.Join(",",",",",", array2));

But returns an error:

FormatException was unhandled by user code.
The index (zero based) must be greater than or equal to zero and less than the size of the list of topics

This is the call to the function:

Page.ClientScript.RegisterStartupScript(this.GetType(), "registerPoiArray", createArrayScript, true);

Here is the javascript var format:

var markers = Poi;

var markers = [
{
    "title": "via Andria, Roma",
    "lat": 41.8902643,
    "lng": 12.6638589,
    "description": "fdsad"
},
{
    "title": "via canosa, Roma",
    "lat": 41.8838417,
    "lng": 12.5438227,
    "description": "fdsad"
},
{
    "title": "via taranto, Milano",
    "lat": 45.4383343,
    "lng": 9.1505354,
    "description": "fdsad"
},
{
    "title": "via barletta, Roma",
    "lat": 41.9102707,
    "lng": 12.4580826,
    "description": "fdsad"
}];

I can not pass this array in javascript.

Serialize your datatable to Json – Pranav Singh Oct 24 '13 at 13:58 — Pranav Singh, Oct 24 '13 at 13:58

score 3 · Answer 1 · edited May 23 '17 at 12:16

You can create a custom class to represent the Datatable. Say if your data table has four columns, create a custom class which has 4 fields in it. Loop through the data table and convert it in to an array of objects of the custom class type.

Finally you can serialize the array into json using the following code.

JavaScriptSerializer js = new JavaScriptSerializer();
js.Serialize(data);

where data is the array of objects.

This is the technique i used..

Data table cannot be serialized easily to JSON directly. refer What's the best way to jSON serialize a .NET DataTable in WCF?

score 1 · Answer 2 · answered Oct 24 '13 at 19:22

1

You have to escape (double up) the curly brace when using String.Format if you want it to spit out the actual curly brace character.

Example:

string createArrayScript = 
     string.Format("var array2 = [{{0}},{{1}},{{2}},{{3}}];",
     ...

answered Oct 24 '13 at 19:22

nothingisnecessary

6,099
36
60

score 0 · Answer 3 · answered Oct 24 '13 at 14:34

Try to use

System.Web.Helpers.Json.Encode

And change the structure you are getting.

List<object> toEncode=new List<object>();
foreach (DataRow dr in dt.Rows){
   Dictionary<string,string> element=new Dictionary<string,string>();
   element.Add("title",dr["title"] as string);
   //repeat for all neaded colums
   toEncode.Add(element);
}
string jsonString=Json.Encode(toEncode);

score 0 · Answer 4 · answered Oct 24 '13 at 15:41

0

I created a gist when I put the solution.

I hope this works for you...

Regards,

answered Oct 24 '13 at 15:41

Augusto Pedraza

538
3
18

score 0 · Answer 5 · answered Jan 22 '17 at 19:28

0

Just use NewtonSoft Json and call:

var JsonString = JsonConvert.SerializeObject(NameofDT, Formatting.Indented)

answered Jan 22 '17 at 19:28

MattE

1,044
1
14
34

how to pass c# datatable to a javascript function

5 Answers5

Linked