反序列化 Json 字典 obj 以显示多个值

Question

我有一个带有模式弹出窗口的视图，它显示“参数”，或者更确切地说是来自字典的数据正在传递到前端。使用我当前的 JS，看来我的函数一次只会反序列化一个键和值。但是，我需要编辑该函数，以便它可以反序列化多个键和值，如果字典传入多个键和值..

下面是我的代码。如果您想了解更多关于后端的信息，请告诉我。

控制器正在返回：

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

return Json(parameters, JsonRequestBehavior.AllowGet);

重申一下，parameters 是一个字典，可以有一个键/值，也可以包含多个键/值对。

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);
        }
    });
});

这里是模态：

<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>

Answer 1

这行令人困惑：

var myKey = key;

循环完成后，myKey 将等于数组中的最后一个 index，因此如果 results 的长度为 3，则 2。

所以，name 将等于 2，value 将等于 results 中的最后一个元素

也许你正在寻找这样的东西，因为 results 是 {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);

Answer 2

请参阅下面的 cmets，本质上您并没有在循环内完成所有工作，因此您的函数似乎产生了 1 个变量（字典中的最后一个变量）

 $("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);
    }
});

});