“无法读取未定义的属性‘长度’。”使用 ColdFusion 和 jQuery 数据表

Question

我正在创建一个应该获取 JSON 数据的 jQuery DataTable 的 ColdFusion 页面。

为此，我在 jQuery 中初始化了 DataTable，并给出了获取数据的正确 URL，但尽管如此，我还是得到了错误

未捕获的类型错误：无法读取未定义的属性“长度”。

1。 allCLient.cfm（返回 JSON 数据）

{
    "COLUMNS": ["CID", "NAME", "EMAIL", "CONTACT", "DOB", "GENDER", "QUALIFICATION", "DESIGNATION", "CITY", "DISTRICT", "MSTATUS", "PHOTO"],
    "DATA": [
        [39, "ramesh", "ramesh@gmail.com", 9494949491, "October, 07 2017 00:00:00", "Male", "MBA", "Tester", "delhi", "mumbai", "unmarried", null],
        [47, "neeraj", "neeraj@gmail.com", 9369369369, "June, 22 2017 00:00:00", "Male", "BE", "Tester", "UP", "UP", "married", null],
        [51, "deepak", "deepak@gmail.com", 8877556699, "August, 19 2017 00:00:00", "Male", "MCA", "Developer", "bhilai", "bhilai", "unmarried", null],
        [59, "vishwa", "vishwa@gmail.com", 8787878787, "October, 08 2017 00:00:00", "Male", "BCA", "Engineer", "durg", "mumbai", "unmarried", null],
        [60, "vivek", "vivek@gmail.com", 8965896589, "August, 17 2017 00:00:00", "Male", "BE", "Engineer", "jagdalpur", "jagdalpur", "married", null],
        [61, "tapas", "tapas@gmail.com", 8082858881, "November, 04 2017 00:00:00", "Male", "MCA", "Tester", "bilaspur", "bilaspur", "unmarried", null],
        [78, "vasu", "vas54@gmail.com", 8877887788, "June, 09 2017 00:00:00", "Male", "MCA", "Engineer", "bhilai", "durg", "unmarried", "ColdFusionTutorial.jpg"],
        [84, "devesh", "devesh@gmail.com", 9494949494, "February, 09 2017 00:00:00", "Male", "MCA", "Developer", "raipur", "raipur", "unmarried", "ColdFusionTutorial.jpg"],
        [88, "deepesh", "deepesh@gmail.com", 8978897889, "September, 14 2017 00:00:00", "Male", "BE", "Developer", "bhilai", "durg", "unmarried", "ColdFusionTutorial.jpg"]
    ]
}

2。 Javascript (jQuery)

$(document).ready(function() {
     $('#example').DataTable({        
         "ajax": "allClient.cfm",
         "columns": [
            { "data": "name" },
            { "data": "email" },
            { "data": "contact" },
            { "data": "designation" },
            { "data": "city" }            
        ]
    });
});

3。 HTML

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Contact</th>
        <th>Designation</th>
        <th>City</th>
    </tr>
    </thead>
</table>

4。 CFML 代码

  <cfquery datasource="cfprogrammer" name="getClient" result="cust">
        select * from client </cfquery>

 <cfif cust.recordcount gt 0>   


 <cfset myArr = ArrayNew(1)>

 <cfloop query = "getClient">
    <cfset mystrct = StructNew()>
    <cfset StructInsert(mystrct,'name',getClient.name)>
    <cfset StructInsert(mystrct,'email',getClient.email)>
    <cfset StructInsert(mystrct,'contact',getClient.contact)>
    <cfset StructInsert(mystrct,'designation',getClient.designation)>
    <cfset StructInsert(mystrct,'city',getClient.city)>

     <cfset ArrayAppend(myArr, mystrct)>
 </cfloop>

   <!--- <cfdump var="#myArr#">--->
   <cfset mystrct1 = StructNew()>
    <cfset StructInsert(mystrct1,'data',myArr)>
   <cfset myJSONvar = serializeJSON(mystrct1)>
   <cfoutput>#myJSONvar#</cfoutput>

<cfelse>
      Failed            
</cfif>

Answer 1

当 ColdFusion 将查询对象转换为 JSON 时，默认情况下结果的结构如下：

{
    "COLUMNS": ["COLNAME-1", "COLNAME-2", "COLNAME-N"],
    "DATA": [
        ["row-1-data-1", "row-1-data-2", "row-1-data-N"],
        ["row-2-data-1", "row-2-data-2", "row-2-data-N"],
        ["row-3-data-1", "row-3-data-2", "row-3-data-N"]
    ]
}

但是 jQuery DataTable 需要这种格式，一个简单的对象数组：

[
    {
        "COLNAME-1": "row-1-data-1", 
        "COLNAME-2": "row-1-data-2", 
        "COLNAME-N": "row-1-data-N"
    },
    {
        "COLNAME-1": "row-2-data-1", 
        "COLNAME-2": "row-2-data-2", 
        "COLNAME-N": "row-2-data-N"
    },
    {
        "COLNAME-1": "row-3-data-1", 
        "COLNAME-2": "row-3-data-2", 
        "COLNAME-N": "row-3-data-N"
    }
]

ColdFusion 可以使用SerializeJSON() function 的特殊参数创建第二种格式（此参数已添加到 CF 2016，更新 2）：

<cfset jsonData = SerializeJSON(yourQuery, "struct")>

现在这取决于您的allCLient.cfm 的外观。我怀疑你只是调用SerializeJSON() 并输出结果。在这种情况下，以上就足够了。

别忘了设置<cfcontent type="application/json">。

此外，正如 cmets 中所指出的，您需要注意 ColdFusion 不区分大小写并且默认为大写列名。因此，您的 JSON 也将具有大写键。 Javascript 区分大小写，这意味着您必须在此处使用大写形式。