2016-09-14 119 views
0

我有以下示例以从Ajax调用获取XML响应并附加到表。对数据表的JSON响应?

$("#ajaxform5").submit(function(e) { 
    var formURL = $(this).attr("action"); 
    var request = $.ajax({ 
     url : formURL, 
     type: "GET", 
     contentType : "application/xml", 
     headers: { 
      "Type" : "events" 
     }, 
     success: function(xml){ 
      $(xml).find('event').each(function(){ 
       var $event = $(this); 
       var id = $event.find("id").text(); 
       var level = $event.find("level").text(); 
       var name = $event.find("name").text(); 
       var attributes01 = $event.find("attributes").children("entry").eq(0).children("string").eq(0).text(); 
       var attributes02 = $event.find("attributes").children("entry").eq(0).children("string").eq(1).text(); 
       var attributes11 = $event.find("attributes").children("entry").eq(1).children("string").eq(0).text(); 
       var attributes12 = $event.find("attributes").children("entry").eq(1).children("string").eq(1).text(); 
       var attributes21 = $event.find("attributes").children("entry").eq(2).children("string").eq(0).text(); 
       var attributes22 = $event.find("attributes").children("entry").eq(2).children("string").eq(1).text(); 
       var attributes31 = $event.find("attributes").children("entry").eq(3).children("string").eq(0).text(); 
       var attributes32 = $event.find("attributes").children("entry").eq(3).children("string").eq(1).text(); 
       var attributes41 = $event.find("attributes").children("entry").eq(4).children("string").eq(0).text(); 
       var attributes42 = $event.find("attributes").children("entry").eq(4).children("string").eq(1).text(); 
       var userId = $event.find("userId").text(); 
       var ipaddress = $event.find("ipaddress").text(); 
       var outcome = $event.find("outcome").text(); 
       var html = '<tr><td>' + id + '</td><td>' + level + '</td><td>' + name + '</td><td>' + 
        '<div><span class="title">' + attributes01 + '</span> <span>' + attributes02 + '</span></div>' + 
        '<div><span class="title">' + attributes11 + '</span> <span>' + attributes12 + '</span></div>' + 
        '<div><span class="title">' + attributes21 + '</span> <span>' + attributes22 + '</span></div>' + 
        '<div><span class="title">' + attributes31 + '</span> <span>' + attributes32 + '</span></div>' + 
        '<div><span class="title">' + attributes41 + '</span> <span>' + attributes42 + '</span></div>' + 
        '</td><td>' + userId + '</td><td>' + ipaddress + '</td><td>' + outcome + '</td></tr>'; 
       $('#eventTable').append(html); 
      }); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
}); 

现在我想用Datatables。因此,我使用xml2json(abdmob/x2js)将响应XML转换为JSON,并在下面获得了JSON响应。

JSON响应;

{ 
    "list" : { 
     "event" : [{ 
       "dateTime" : "1473858435162", 
       "nanoTime" : "438326047248251", 
       "id" : "15680", 
       "eventTime" : { 
        "time" : "1473851193487", 
        "timezone" : "Asia/Istanbul" 
       }, 
       "level" : "INFORMATION", 
       "name" : "Get message content", 
       "attributes" : { 
        "entry" : [{ 
          "string" : ["metaDataIds", "6"] 
         }, { 
          "string" : ["messageId", "2765"] 
         }, { 
          "string" : ["channel", "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]"] 
         } 
        ], 
        "_class" : "linked-hash-map" 
       }, 
       "outcome" : "SUCCESS", 
       "userId" : "1", 
       "ipAddress" : "127.0.0.1", 
       "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
      }, { 
       "dateTime" : "1473858435167", 
       "nanoTime" : "438326052034149", 
       "id" : "15679", 
       "eventTime" : { 
        "time" : "1473851191973", 
        "timezone" : "Asia/Istanbul" 
       }, 
       "level" : "INFORMATION", 
       "name" : "Get messages by page limit", 
       "attributes" : { 
        "entry" : [{ 
          "string" : ["filter", "MessageFilter[maxMessageId=2765,minMessageId=<null>,originalIdUpper=<null>,originalIdLower=<null>,importIdUpper=<null>,importIdLower=<null>,startDate=<null>,endDate=<null>,textSearch=<null>,textSearchRegex=<null>,statuses=<null>,includedMetaDataIds=[6],excludedMetaDataIds=<null>,serverId=<null>,contentSearch=[],metaDataSearch=<null>,textSearchMetaDataColumns=<null>,sendAttemptsLower=<null>,sendAttemptsUpper=<null>,attachment=false,error=false]"] 
         }, { 
          "string" : ["includeContent", "false"] 
         }, { 
          "string" : ["offset", "0"] 
         }, { 
          "string" : ["limit", "21"] 
         }, { 
          "string" : ["channel", "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]"] 
         } 
        ], 
        "_class" : "linked-hash-map" 
       }, 
       "outcome" : "SUCCESS", 
       "userId" : "1", 
       "ipAddress" : "127.0.0.1", 
       "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
      } 
     ] 
    } 
} 


所以我的第一个问题,就是这个JSON响应有效的数据表?
如果它是有效的,我怎么能像对待我的第一个例子中的对象和数组的行/列?

我试图插入JSON响应数据表,但我不能。你可以在图片中看到结果。 response added to rows char by char

我给出了下面的代码仅用于说明,您不想知道我有多少流口水插入数据。
我也尝试了columns.data选项来读取数组,但又失败了。

$("#ajaxform6").submit(function(e) { 
    var formURL = $(this).attr("action"); 
    var request = $.ajax({ 
     url : formURL, 
     type: "GET", 
     contentType : "application/xml", 
     headers: { 
      "Type" : "events" 
     }, 
     success: function(data, textStatus, jqXHR) { 
      var x2js = new X2JS(); 
      var bXML = jqXHR.responseText; 
      var jsonObj = x2js.xml_str2json(bXML); 
      var json = JSON.stringify(jsonObj); 
      console.log(json); 
      $('#table_id').DataTable({ 
       data: json, 
       bSort: false, 
      }); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      alert(textStatus); 
     } 
    }); 
}); 

回答

1

您的JSON数据作为响应是有效的,可以被解析到datatable

你可以参考我所使用json数据创建数据表如下代码:

var jsdata = { 
 
\t \t "list" : { 
 
\t \t \t "event" : [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t "dateTime" : "1473858435162", 
 
\t \t \t \t \t \t "nanoTime" : "438326047248251", 
 
\t \t \t \t \t \t "id" : "15680", 
 
\t \t \t \t \t \t "eventTime" : { 
 
\t \t \t \t \t \t \t "time" : "1473851193487", 
 
\t \t \t \t \t \t \t "timezone" : "Asia/Istanbul" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "level" : "INFORMATION", 
 
\t \t \t \t \t \t "name" : "Get message content", 
 
\t \t \t \t \t \t "attributes" : { 
 
\t \t \t \t \t \t \t "entry" : [ 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "metaDataIds", "6" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "messageId", "2765" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "channel", 
 
\t \t \t \t \t \t \t \t \t \t \t \t "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]" ] 
 
\t \t \t \t \t \t \t \t \t } ], 
 
\t \t \t \t \t \t \t "_class" : "linked-hash-map" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "outcome" : "SUCCESS", 
 
\t \t \t \t \t \t "userId" : "1", 
 
\t \t \t \t \t \t "ipAddress" : "127.0.0.1", 
 
\t \t \t \t \t \t "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
 
\t \t \t \t \t }, 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t "dateTime" : "1473858435167", 
 
\t \t \t \t \t \t "nanoTime" : "438326052034149", 
 
\t \t \t \t \t \t "id" : "15679", 
 
\t \t \t \t \t \t "eventTime" : { 
 
\t \t \t \t \t \t \t "time" : "1473851191973", 
 
\t \t \t \t \t \t \t "timezone" : "Asia/Istanbul" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "level" : "INFORMATION", 
 
\t \t \t \t \t \t "name" : "Get messages by page limit", 
 
\t \t \t \t \t \t "attributes" : { 
 
\t \t \t \t \t \t \t "entry" : [ 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ 
 
\t \t \t \t \t \t \t \t \t \t \t \t "filter", 
 
\t \t \t \t \t \t \t \t \t \t \t \t "MessageFilter[maxMessageId=2765,minMessageId=<null>,originalIdUpper=<null>,originalIdLower=<null>,importIdUpper=<null>,importIdLower=<null>,startDate=<null>,endDate=<null>,textSearch=<null>,textSearchRegex=<null>,statuses=<null>,includedMetaDataIds=[6],excludedMetaDataIds=<null>,serverId=<null>,contentSearch=[],metaDataSearch=<null>,textSearchMetaDataColumns=<null>,sendAttemptsLower=<null>,sendAttemptsUpper=<null>,attachment=false,error=false]" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "includeContent", "false" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "offset", "0" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "limit", "21" ] 
 
\t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t \t "string" : [ "channel", 
 
\t \t \t \t \t \t \t \t \t \t \t \t "Channel[id=44ab0667-d42c-496c-bca2-2bd7eecd6dc9,name=API jQuery Direct]" ] 
 
\t \t \t \t \t \t \t \t \t } ], 
 
\t \t \t \t \t \t \t "_class" : "linked-hash-map" 
 
\t \t \t \t \t \t }, 
 
\t \t \t \t \t \t "outcome" : "SUCCESS", 
 
\t \t \t \t \t \t "userId" : "1", 
 
\t \t \t \t \t \t "ipAddress" : "127.0.0.1", 
 
\t \t \t \t \t \t "serverId" : "f85e48e2-32b3-429f-bee5-31630d8143a2" 
 
\t \t \t \t \t } ] 
 
\t \t } 
 
\t }; 
 

 
\t $(document).ready(function() { 
 
\t \t $('#table_id').DataTable({ 
 
\t \t \t data : jsdata.list.event, 
 
\t \t \t columns : [ { 
 
\t \t \t \t title : "Id", 
 
\t \t \t \t data : 'id' 
 
\t \t \t }, { 
 
\t \t \t \t title : "Level", 
 
\t \t \t \t data : 'level' 
 
\t \t \t }, { 
 
\t \t \t \t title : "Name", 
 
\t \t \t \t data : 'name' 
 
\t \t \t }, { 
 
\t \t \t \t title : "UserId", 
 
\t \t \t \t data : 'userId' 
 
\t \t \t }, { 
 
\t \t \t \t title : "Ip Address", 
 
\t \t \t \t data : 'ipAddress' 
 
\t \t \t } 
 

 
\t \t \t ] 
 
\t \t }); 
 
\t });
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 

 

 
<table id="table_id" class="display" width="100%"></table>

+0

感谢@abhijeet的帮助。 还有一件事,我怎样才能在一个领域添加两个数据?例如,我想在一个字段中显示ID和Level。 – Erdogan

+0

不客气@ObsessiO – Abhijeet

+0

我更新了我的评论,但是您没有收到有关此@Abhijeet的通知。 你有什么想法如何在一个领域添加两个数据?例如,我想在一个字段中显示“ID”和“Level”。 – Erdogan

0
  • 你并不需要使用JSON.stringify
  • 您需要与columns.data财产2列的表

示例代码如下所示指定数据属性的每一列。为更多列添加更多column.data条目。收到

$('#table_id').DataTable({ 
    data: jsonObj.list.event, 
    columns: [ 
     { data: 'name' }, 
     { data: 'level' } 
    ] 
}); 
+0

非常感谢你@ Gyrocode.com的字符串化。 – Erdogan