Pass Dictionary> to java script

Question

I would like to pass a Dictionary> to client using JavaScript.

I did look at this post and I didn't understand exactly how to proceed. In case I'm doing something wrong I'll explain what I want to do. The dictionary contains the 'name' key of all worksheets in the Excel file, and the 'value' is the column value of the first row in that worksheet. The UI of the client should have two "drop list", the first will contain the key which is all the names of the worksheet in the Excel file. The second contain all the column value of the first row of the worksheets that will choose in the first drop list – which is actually a List as the value in the dictionary.

So all the back end C# code is working fine. Now I need help in the front end JavaScript.

How do I parse the data to a key value so I can do a "search" on the keys as the client chooses some "key" in the first drop list so I can get back the relevant values as a list?

Thanx!

   var ajaxRequest = $.ajax({
        type: "POST",
        url: "http://localhost:1894/api/Values",
        contentType: false,
        processData: false,
        data: data,
        success: function(dataTest) {

        }
    });

This is the JSON that I get back from the server:

{"First":["Name","Link","User","Pass"],"Sec":["test01"]}

How would I perform a search on this like in C#? I want to be able to do something like this: "dict.TryGetValue(key, out value); and the out value would return as an array of string or as a List.

I'm not sure. In the web api controller i just do a "return" with no special attribute or something. How do i check if it is a JSON? — user384496, Apr 23 '15 at 17:25
Call the service in your browser and look at the returned response. Just enter `http://localhost:1894/api/Values` in your browser and see what the response is... — brso05, Apr 23 '15 at 17:27
Looks like xml...you can parse xml using javascript but it would be easier if it was returned as JSON then javascript would automatically parse and generate the object for you. — brso05, Apr 23 '15 at 17:47
Check out this link http://stackoverflow.com/a/3958040/4028085 — brso05, Apr 23 '15 at 17:50
OK. Thanx. I did change the WebApiConfig.cs as i found here: http://stackoverflow.com/questions/9847564/how-do-i-get-asp-net-web-api-to-return-json-instead-of-xml-using-chromeand. now i get the return as: ["value1","value2"]. What the next step? — user384496, Apr 23 '15 at 18:06
Now you can directly access the data via `dataTest`. I'll post an example... — brso05, Apr 23 '15 at 18:07

brso05 · Accepted Answer · 2015-04-23T19:26:37.253

0

Try this(you don't need var ajaxRequest variable you can directly call like this:

 $.ajax({
    type: "POST",
    url: "http://localhost:1894/api/Values",
    dataType: "json",
    data: data,
    success: function(dataTest) {
        //dataTest should contain your data in a javascript object
        for(var i = 0; i < dataTest.First.length; i++)
        {
            window.alert("" + dataTest.First[i]);
        }
        for(var i = 0; i < dataTest.Sec.length; i++)
        {
            window.alert("" + dataTest.Sec[i]);
        }
        //etc...
        //this should print the values returned if you showed me exactly how your JSON is...
    }
 });

The javascript object will contain properties with an array as the value for each property. Think of it like a map of <String, String[]>. So your returned object dataTest will have properties First and Sec and for First the value associated with the key First will be ["Name","Link","User","Pass"] which is just an array. Same for Sec. So `dataTest.First[0] will equal "Name" and dataTest.First[1] will equal "Link" etc...

*****************************************UPDATE**************************************

You can save your dataTest to a global variable in this example (myObject) then you can access like this:

var key = "First";
// Or if you want to get your key from a dropdown (select) element then you could do like this:
var key = document.getElementById("myselect").options[document.getElementById("myselect").selectedIndex].innerHTML;

if(myObject[key] != undefined)
{
    //That means there is values for this key.
    //Loop through values or do whatever you want with myObject[key].
    for(var i = 0; i < myObject[key].length; i++)
    {
        window.alert("" + myObject[key][i]);
    }
}

edited Apr 23 '15 at 19:26

answered Apr 23 '15 at 18:08

brso05

13,142
2
21
40

I dont understend what is the diffrence. – user384496 Apr 23 '15 at 18:11
@user384496 i just updated the answer you should see the results pop-up in a dialog box... – brso05 Apr 23 '15 at 18:12
@user384496 this should work if your returned JSON actually matches what you posted. – brso05 Apr 23 '15 at 18:12
@user384496 i just updated you should set `dataType: "json"` to json and you don't need `data: data,` unless you are passing parameters to the service and in that case your `data` object will be an object of key, value pairs the parameters you are passing... – brso05 Apr 23 '15 at 18:16
@user384496 post your full JSON so I can see what you are dealing with...it's hard to know what the javascript object is going to contain without seeing the json... – brso05 Apr 23 '15 at 18:17
Now the return values is: "First: Array[4] 0: "Name" 1: "Link" 2: "User" 3: "Pass" length: 4 __proto__: Array[0] Sec: Array[1] 0: "ghuj". "First" and "Sec" is actually the "Keys" – user384496 Apr 23 '15 at 18:27
@user384496 can you post full json return in your question so it is easier to look at? – brso05 Apr 23 '15 at 18:29
You mean to send the post request directly from the url as you ask me before? – user384496 Apr 23 '15 at 18:36
Yes put this in your browser `http://localhost:1894/api/Values` then copy and paste whatever shows up in your browser so I can see the JSON but make sure you post it in your question so it is easier to read... – brso05 Apr 23 '15 at 18:38
@user384496 alright cool that is what I would expect...I will update my answer so you can see how to get list by key... – brso05 Apr 23 '15 at 18:41
@user384496 there I just updated my answer the javascript object will be kind of like `Map` Hope that helps! – brso05 Apr 23 '15 at 18:48
First of all thanx. but how would i perform on this a search like in c#?! I want to be able to do something like this: "dict.TryGetValue(key, out value); and the out value would return as array of string or as List. – user384496 Apr 23 '15 at 18:58
@user384496 I just posted an update hopefully that helps...If this answer is helpful can you please upvote it and accept it as correct answer thanks! – brso05 Apr 23 '15 at 19:20
@user384496 you're welcome! I'm glad I was able to help! – brso05 Apr 23 '15 at 19:42

Pass Dictionary> to java script

1 Answers1