Passing jQuery dictionary object to an input field

Question

var dictionary = [];

dictionary.push({
                key:"Res01" ,
                value: "Loss of internet connection at location"
            });

when adding this dictionary object to an input field

$('#hdnNotesDict').val('');
$('#hdnNotesDict').val(dictionary);

i am not getting the dictionary value in that input field.

getting result as: [object,object]

Thanks in advance and any suggestion will be appreciated

Depending on what value you want try with `$('#hdnNotesDict').val(dictionary[0].value);` — Carsten Løvbo Andersen, Sep 28 '20 at 06:09
Hi @CarstenLøvboAndersen I have tried that also but if i have 100 values in dictionary then it will not work. — Cipher, Sep 28 '20 at 06:12
and also i wanted to store key and value both in that field. — Cipher, Sep 28 '20 at 06:17
Try this https://stackoverflow.com/questions/41461762/get-value-from-key-value-array — Carsten Løvbo Andersen, Sep 28 '20 at 06:17
How exactly you want to display the dictionary values in a textbox? — Chetan, Sep 28 '20 at 06:19
i need dictionary values like : 0: {key: "1", value: "sdasdasfsfsfs"} So that i can use that input field values at controller for manipulations. — Cipher, Sep 28 '20 at 06:27
You need to create a string by iterating thru the dictionary... or you can try converting dictionary to JSON string by doing JSON.Stringify. https://stackoverflow.com/questions/4162749/convert-js-object-to-json-string — Chetan, Sep 28 '20 at 06:29
Thanks @ChetanRanpariya it solved my criteria in jquery but at controller post method i am getting that value in variable like Dictionary hdnNotesDict and resulting as count 0 . — Cipher, Sep 28 '20 at 06:39
yes, because you send string of array of objects in your controller you should convert it back from jstring to object — spzvtbg, Sep 28 '20 at 06:50

spzvtbg · Answer 1 · 2020-09-28T07:46:29.533

Let's say you have this form in your view:

<form method="post">
    <input id="kvps" name="kvps" />
    <input id="submit" type="submit" value="Submit" />
</form>

and you put some values like that:

(function () {
    $('#submit').mousedown(function () {
        let input = $('#kvps');
        let dict = [];

        for (var i = 0; i < 10; i++) {
            dict.push({ key: `Res${i}`, val: `Val${i}` });
        }

        input.val(JSON.stringify(dict));
    });
})();

in this case you convert the array in a string and you should take it as string into your controller BUT - you cannot convert it to dictionary immediately, first you should map it to array of model with the same property names then you can call ToDictionary over it.

Array example:

    [HttpPost]
    public IActionResult JInput(string kvps)
    {
        var arr = JsonSerializer.Deserialize<object[]>(kvps);

        return this.View();
    }

If you need it as Dictionary<string, string> you schould use in your jquery object instead:

    (function () {
        $('#submit').mousedown(function () {
            let input = $('#kvps');
            let dict = {};

            for (var i = 0; i < 10; i++) {
                // watch out for the keys here to not overwrite the values
                dict[`Res${i}`] = `Val${i}`;
            }

            input.val(JSON.stringify(dict));
        });
    })();

And in your controller like that:

    [HttpPost]
    public IActionResult JInput(string kvps)
    {
        var arr = JsonSerializer.Deserialize<Dictionary<string, string>>(kvps);

        return this.View();
    }

Passing jQuery dictionary object to an input field

1 Answers1