javascript - 如何从 CFC 结果填充 Jquery 数组和 DOM 对象

Question

我遇到以下问题，希望有人能启发我更合适的解决方案。首先，我尝试从 Ajax 中 CFC 调用的结果中填充 12 个表单对象。我对返回的集合进行 if/else 操作，并通过从 CFC 返回的描述填充每个 DOM 对象值，必须有一种更简单的方法来执行此操作。让我向您展示支持组件，然后是我认为可以做得更好的 ajax 调用；

jQueryUtils.js中使用getValue()调用SessionMgr.cfc获取session变量值；

function getValue(a) {
    var result = undefined;

        $.ajax({
                url: "cfc/SessionMgr.cfc",
                async: false,
                type: "get",
                dataType: "text",
                data: {
                    method: "getValue",
                    variablename: a
                },
              success: function(response) {
                  result = response;
                  //console.log('getValue: ', a , ' value: ' , response);
              },
              error: function(jqXHR, status, error) {
                  console.log('Error Occurred');
                  console.log(error);
              }
          });
    return result;
 }

调用 SessionMgr.cfc；

<cffunction name="getValue" access="remote" returntype="string" returnformat="plain" output="yes" hint="I get the value of the given user-specific variable.">
    <cfargument name="variablename" type="string" required="yes">
    <cfreturn session[arguments.variableName] />
</cffunction>

然后调用以下函数；

function getAllNodeValues() {

    var lID =        getValue('lID');
    var nID =        getValue('nID');
    var rLocation =  getValue('rLocation');
    var rMonth =     getValue('rMonth');
    var rYear =      getValue('rYear');
    var rStartDate = getValue('rStartDate');
    var rEndDate =   getValue('rEndDate');

        $.ajax({
            url: "cfc/Nodes.cfc",
            type: "get",
            async: false,
            dataType: "json",
            data: {
                Method: "GetAllNodeValues",
                LineID: lID,
                LineNodeID: nID,
                DCID: rLocation,
                Month: rMonth,
                Year: rYear,
                StartDate: rStartDate,
                EndDate: rEndDate
            },
          success: function(response) {
              $.each(response.DATA, function(i, row) {
                  // get value of first row as descriptions;
                  var val = row[0];
                  var descr = row[1];
                  // append new options
                  if(descr == 'IsActive') {
                      $('#cboNodeIsActive').val(val);
                  } else if(descr == 'OpCode') {
                      $('#cboNodeOpCode').val(val);
                  } else if(descr == 'IsUnits') {
                      $('#txtNodeIsUnits').val(val);
                  } else if(descr == 'Fractal') {
                      $('#cboNodeFractal').val(val);
                  } else if(descr == 'Ordinal') {
                      $('#txtNodeOrdinal').val(val);
                  } else if(descr == 'ParentID') {
                      $('#cboNodeParentID').val(val);
                  } else if(descr == 'Constant') {
                      $('#cboNodeConstant').val(val);
                  } else if(descr == 'ConstantValue') {
                      $('#txtNodeConstantValue').val(val);
                  } else if(descr == 'CurrentBalance') {
                      $('#txtNodeCurrentBalance').val(val);
                  } else if(descr == 'EndingBalance'){
                      $('#xtxNodeEndingBalance').val(val);
                  } else if(descr == 'CurrentUnits'){
                      $('#txtNodeCurrentUnits').val(val)
                  } else if(descr == 'EndingUnits'){
                      $('#txtNodeEndingUnits').val(val);
                  }
              });
          },
          error: function(msg) {
              console.log(msg);
          }
      });   
    }

返回此数据集； 由于我的 DOM 对象的命名约定，设置它们的唯一方法似乎是在 $.each() 事件期间通过 if/else 结束。如果有人有更好的直接访问数组的方法，或者对这里的操作方式有任何改进，我们将不胜感激。

所以返回的 JSON 对象有 COLUMNS 和 DATA，如何在 if/else 中计算 COLUMNS，然后获取与数组引用对应的 DATA 值？

所以，我将其添加到我的成功中:回调；

 var i = 0;
              var col = [];
              var dat = [];
              col = response.COLUMNS;
              dat = response.DATA;
              console.log('col ', col);
              console.log('dat ',dat);

这是控制台结果，

我不明白的是为什么 DATA 嵌套的层比 COLUMNS 更深，然后如何将列名与数据中的值匹配成对，我可以评估一个并将我的 DOM 对象设置为另一个？

Answer 1

what I dont understand is why is DATA nested a layer deeper than COLUMNS, and then how do I match-up the column name to the value in data into pairs that I can evaluate one and set my DOM object to the other?

ColdFusion 中的 JSON 序列化与其附带的 UI 小部件相关联。大多数开发人员已经放弃了这些 UI 标签，但问题是将查询对象转换为更标准的 JSON 格式。 I created a CFC to handle that 。

serializeJSON( someQuery )

将以这种格式返回:

{
  "COLUMNS":["BOOKID","TITLE","GENRE"],
  "DATA":[
    [8,"Apparition Man","Fiction"],
    [2,"Shopping Mart Mania","Non-fiction"]
  ]
}

此 CFC 会将查询对象转换为数组数组或结构数组(JSON 对象):

{
  "data":[
    {"bookid":8,"genre":"Fiction","title":"Apparition Man"},
    {"bookid":2,"genre":"Non-fiction","title":"Shopping Mart Mania"}
  ]
}

默认情况下，CFC 将所有列名称小写。如果您愿意，您可以对其进行调整以将列名称保留为当前大小写。然后，您可以使用 jQuery 通过表单 ID 选择表单中的所有字段，并将 JSON 键映射到字段 ID。我确信还有其他方法可以完成该任务，而无需一次手动将数据映射到一个字段。