Reading C# dictionary in Javascript

javascript jquery asp.net json dictionary

34,178

Solution 1

You read like this:

alert(Chats["Sam"]);

(so like a C# Dictionary :-). You read/write to it using something like Chats["propertyName"])

or, to go through each value:

for (var c in Chats)
{
    if (Chats.hasOwnProperty(c)) 
    {
        alert(c + '   ' + Chats[c]);
    }
}

Note that this is different than C#. In C# c would contain a KeyValuePair<> containing both the key and the value. In Javascript c is only the key and to get the value you have to use Chats[c].

(the reasoning for hasOwnProperty is here http://yuiblog.com/blog/2006/09/26/for-in-intrigue/)

Now... If you really want to split it:

var array = [];

for (var c in Chats)
{
    if (Chats.hasOwnProperty(c)) 
    {
        array.push([c, Chats[c]]);
    }
}

Solution 2

I guess the important point here is that you properly understand what is going on on the JavaScript client side. The datatype that arrives on the JavaScript client side is a JSON string. JSON (= JavaScript Object Notation) can directly be interpreted by JavaScript.

A JavaScript object looks as follows:

var anObject = { name: "Sam", surname: "abc"};

You can access the properties of a JavaScript object either through a somewhat Dictionary-similar way like

anObject["name"] //will get "Sam"

or directly (property notation)

anObject.name

Instead a similar JSON string would look like

var aJsonString = '{ "name": "Sam", "surname": "abc"}'

Now to convert the JSON string to a JavaScript object you need to parse it. jQuery does this already for you, otherwise you can invoke JSON.parse(aJsonString) and you'll get a valid JavaScript object.

Here I did a quick example: http://jsbin.com/adejev/2/edit

Solution 3

Just add the data type json to your ajax request

$.ajax({
 url: "TextChatCalls/getChat.aspx",
 type: "POST",
 dataType: "json"
 context: document.body,
 success: function (response) {
          // do something with response
 });

This will make response a javascript object that you can access like this

alert(response["sam"]) //How are you?

to split that up into a 2d array just do this

var Chats = [];
for ( k in response ){
  Chats[Chats.length] = [k, response[k]];
}

34,178

Author by

Jayesh

Updated on July 19, 2022

Comments

Jayesh almost 2 years

I have a dictionary variable in C# (ASP.NET). I want to send this data to Javascript. I am using this code to serialize it and send to javascript.

Dictionary<string, string> chat;
chat = new Dictionary<string, string>();

chat.Add("Sam", "How are you?");
chat.Add("Rita", "I am good");
var serialize = new System.Web.Script.Serialization.JavaScriptSerializer();

Response.Write(serialize.Serialize(chat));

On the Javascript page, I am calling this page using this;

 $.ajax({
 url: "TextChatCalls/getChat.aspx",
 type: "POST",
 context: document.body,
 success: function (response) {
          var Chats = response.split('\n')[0];
          alert(Chats);

          }
 });

The value in Chats var is {"Sam":"How are you?","Rita":"I am good"}

I don't know how do I read this value in Chats. Can I anyhow convert this into a 2D array and read it as array[0][0], array[1][0] etc. ?

Thanks.

EDIT: One more confusion is that, the response object, returned from ASP.NET, contains

{"Sam":"How are you?","Rita":"I am good"}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="getChat.aspx?Id=141755" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZJctiKZK4rXVndR3mbGssIarCrOF" />
</div>

    <div>

    </div>
    </form>
</body>
</html>

And not just {"Sam":"How are you?","Rita":"I am good"} as expected. And hence I have to split the response object by var Chats = response.split('\n')[0]; which makes it an string!

Jayesh over 12 years

I can't understand why, but my response object contains this value "{"Sam":"How are you?","Rita":"I am good"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="w3.org/1999/xhtml"> <head><title> </title></head> <body> <form name="form1" method="post" action="getChat.aspx?Id=141755" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZJctiKZK4rXVndR3mbGssIarCrOF" /> </div> <div> </div> </form> </body> </html> "
xanatos over 12 years

@Joy You have to do a Response.End() after the Response.Write(), otherwhise you'll send the whole aspx page after the JSON :-)
Stephen Kennedy over 10 years

Better still you should be using an ashx handler or a page method. There's no point going through the aspx lifecycle if you're not going to output the page content.