CODEWITHSUNDEEP
javascriptjsonasp.net-mvcdictionary
Jacked_Nerd
Jacked_Nerd

Reputation: 237

Deserializing Json dictionary obj to display multiple values

I have a view with a modal pop-up that displays "parameters" or rather data from a Dictionary being passed to the front end. With my current JS, it appears my function will only deserializing one key and value at a time. However, I need to edit the function so that It can deserialize more than one key and value, if the dictionary is passing in more than one key and value..

Below is my code. If you want to know more about the back end please let me know.

Controller is returning:

var parameters = new Dictionary<string, string>();

return Json(parameters, JsonRequestBehavior.AllowGet);

To reiterate, parameters is a Dictionary that can have either one key/value OR it could hold multiple key/value pairs.

JS:

   $("button[name='paramsBtn']").click(function () {
    /* Grabs ID from col selected */
    var $col = $(this).closest('.row').find('.requestId');
    var jobRequestId = $col.data('id');

     $.ajax({
        url: '@Url.Action("JobPollerParameters", "Tools")',
         data: { "jobRequestId": jobRequestId},
         success: function (results) {

            $modal = $('#paramsModal');
            $modal.modal("show");

             var arr = results;
             //loop through arr created from dictionary to grab key(s)
             for (var key in arr) {
                 if (arr.hasOwnProperty(key)) {
                     var myKey = key;
                 }
             }

             var name = myKey;
             var value = results[myKey];

            $('#modalName').text(name);
             $('#modalMessage').text(value);
        }
    });
});

Here is the modal:

<div class="modal fade" id="paramsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header modal-header-primary">
                <a class="btn btn-xs btn-primary pull-right" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></a>
                <h4 class="modal-title" id="modalTitleText">Job Parameters</h4>
            </div>
            <div class="modal-body">
                <div class="list-group">
                    <div class="row list-group-item list-group-item-heading container divTableHeading" style="width:inherit; margin-bottom:0px;">
                        <div class="col-md-6 font-weight-bold"> Parameter: </div>
                        <div class="col-md-6 font-weight-bold"> Value: </div>
                    </div>

                    <div class="row list-group-item container" style="width:inherit;">
                        <div class="col-md-6 text-break" id="modalName"></div>
                        <div class="col-md-6 text-break" id="modalMessage"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 52

Answers (2)

David Fox
David Fox

Reputation: 10753

This line is confusing:

var myKey = key;

After the loop completes, myKey will be equal to the last index in your array, so 2 if results had length 3.

So, name will equal 2 and value will be equal to the last element in results

Maybe you're looking for something like this, since results is {string, string}:

// sample results array from server
var arr = ["val1", "val2", "val3"];
var displayString = "";
for (var key in arr) {
  if (arr.hasOwnProperty(key)) {
    displayString += arr[key] + ","; // note, there will be a trailing comma
  }
}
console.log(displayString);

Upvotes: 2

tstrand66
tstrand66

Reputation: 968

See the comments below, essentially you arent doing all of the work inside the loop thus your function appears to produce 1 variable (the last one in the dictionary)

 $("button[name='paramsBtn']").click(function () {
/* Grabs ID from col selected */
var $col = $(this).closest('.row').find('.requestId');
var jobRequestId = $col.data('id');

 $.ajax({
    url: '@Url.Action("JobPollerParameters", "Tools")',
     data: { "jobRequestId": jobRequestId},
     success: function (results) {

        $modal = $('#paramsModal');
        $modal.modal("show");

         var arr = results;
         //loop through arr created from dictionary to grab key(s)
         for (var key in arr) {
             if (arr.hasOwnProperty(key)) {
                 var myKey = key;
             }
         }
        //Move these variables inside the loop. you are setting them once
        //they are in essence being set to the last value in the dictionary
         var name = myKey;
         var value = results[myKey];
         $('#modalName').text(name);
         $('#modalMessage').text(value);
    }
});

});

Upvotes: 1

Related Questions