如何將atom/xml型別的回應輸出到JqueryDataTable中？-有解無憂

如何將 atom/xml feed 型別的回應（來自 arxiv 呼叫）輸出到 Jquery DataTable 中？

我的資料表適用于從 Ajax 呼叫到燒瓶服務器示例的簡單 json。

當我嘗試使用來自 arxiv api 回應的 xml 來執行此操作時，我似乎無法讓它顯示在資料表中（盡管我可以使用<pre lang="xml" >或 json 列印原始 xml）。

我還嘗試首先通過python字典轉換為json，但仍然無法將其格式化為資料表，因為我不確定當它們比鏈接的基本示例中的第一級更深時如何在Ajax呼叫中正確訪問屬性。

模板中的 HTML：

<table id="arxivtable" class="display" style="width:100%">
  <thead>
      <tr>
          <th>title</th>
          <th>id</th>
          <th>link</th>
          <th>author</th>
          <th>published</th>
      </tr>
  </thead>
</table>

我通過 xml 嘗試過：

  $('#arxivtable').DataTable({
            "ajax": {
                // "url": "static/objects2.txt", // This works for the static file
                "url": "/get_arxivpapers", // This now works too thanks to @kthorngren
                "dataType": "xml",
                "type":"GET",
                "dataSrc": "{{name}}",
                "contentType":"application/atom xml"
            },
            "columns": [
                {"data": "title"},
                {
                        "data": "link",
                        "render": function(data, type, row, meta){
                           if(type === 'display'){
                               data = '<a href="'   data   '">'   data   '</a>';
                           }

                           return data;
                        }
                      },
                      { "data": "id" },
                      { "data": "link" },
                       { "data": "author" },
                       { "data": "journal" },
                       { "data": "published" },
                       { "data": "summary" }

            ]
            });

來自 AJAX 呼叫的 JSON：

    {
  "feed": {
    "@xmlns": "http://www.w3.org/2005/Atom",
    "link": {
      "@href": "http://arxiv.org/api/query?search_query=all:einstein&id_list=&start=0&max_results=2",
      "@rel": "self",
      "@type": "application/atom xml"
    },
    "title": {
      "@type": "html",
      "#text": "ArXiv Query: search_query=all:einstein&id_list=&start=0&max_results=2"
    },
    "id": "http://arxiv.org/api/vehKAQR bheXtHwJw3qx/OG/XXw",
    "updated": "2022-06-14T00:00:00-04:00",
    "opensearch:totalResults": {
      "@xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
      "#text": "36970"
    },
    "opensearch:startIndex": {
      "@xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
      "#text": "0"
    },
    "opensearch:itemsPerPage": {
      "@xmlns:opensearch": "http://a9.com/-/spec/opensearch/1.1/",
      "#text": "2"
    },
    "entry": [
      {
        "id": "http://arxiv.org/abs/1801.05533v2",
        "updated": "2018-11-22T14:04:43Z",
        "published": "2018-01-17T03:05:51Z",
        "title": "Einstein-Weyl structures on almost cosymplectic manifolds",
        "summary": "",
        "author": {
          "name": "Xiaomin Chen"
        },
        "arxiv:comment": {
          "@xmlns:arxiv": "http://arxiv.org/schemas/atom",
          "#text": "accepted by Periodica Mathematica Hungarica, 14 pages, no figures"
        },
        "link": [
          {
            "@href": "http://arxiv.org/abs/1801.05533v2",
            "@rel": "alternate",
            "@type": "text/html"
          },
          {
            "@title": "pdf",
            "@href": "http://arxiv.org/pdf/1801.05533v2",
            "@rel": "related",
            "@type": "application/pdf"
          }
        ],
        "arxiv:primary_category": {
          "@xmlns:arxiv": "http://arxiv.org/schemas/atom",
          "@term": "math.DG",
          "@scheme": "http://arxiv.org/schemas/atom"
        },
        "category": [
          {
            "@term": "math.DG",
            "@scheme": "http://arxiv.org/schemas/atom"
          },
          {
            "@term": "53D10, 53D15",
            "@scheme": "http://arxiv.org/schemas/atom"
          }
        ]
      },
      {
        "id": "http://arxiv.org/abs/0802.2137v3",
        "updated": "2008-04-01T04:36:21Z",
        "published": "2008-02-15T04:40:56Z",
        "title": "",
        "summary": ".",
        "author": {
          "name": ""
        },
        "arxiv:comment": {
          "@xmlns:arxiv": "http://arxiv.org/schemas/atom",
          "#text": "18 pages, added Theorem 5"
        },
        "link": [
          {
            "@href": "http://arxiv.org/abs/0802.2137v3",
            "@rel": "alternate",
            "@type": "text/html"
          },
          {
            "@title": "pdf",
            "@href": "http://arxiv.org/pdf/0802.2137v3",
            "@rel": "related",
            "@type": "application/pdf"
          }
        ],
        "arxiv:primary_category": {
          "@xmlns:arxiv": "http://arxiv.org/schemas/atom",
          "@term": "math.DG",
          "@scheme": "http://arxiv.org/schemas/atom"
        },
        "category": [
          {
            "@term": "math.DG",
            "@scheme": "http://arxiv.org/schemas/atom"
          },
          {
            "@term": "53C30; 53C25",
            "@scheme": "http://arxiv.org/schemas/atom"
          }
        ]
      }
    ]
  }
}

或原始 atom/xml：

<feed xmlns="http://www.w3.org/2005/Atom">
  <link href="http://arxiv.org/api/query?search_query=all:einstein&id_list=&start=0&max_results=2" rel="self" type="application/atom xml">
  <title type="html">ArXiv Query: search_query=all:einstein&amp;id_list=&amp;start=0&amp;max_results=2</title>
  <id>http://arxiv.org/api/vehKAQR bheXtHwJw3qx/OG/XXw</id>
  <updated>2022-06-14T00:00:00-04:00</updated>
  <opensearch:totalresults xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">36970</opensearch:totalresults>
  <opensearch:startindex xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">0</opensearch:startindex>
  <opensearch:itemsperpage xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/">2</opensearch:itemsperpage>
  <entry>
    <id>http://arxiv.org/abs/1801.05533v2</id>
    <updated>2018-11-22T14:04:43Z</updated>
    <published>2018-01-17T03:05:51Z</published>
    <title></title>
    <summary> 
</summary>
    <author>
      <name></name>
    </author>
    <arxiv:comment xmlns:arxiv="http://arxiv.org/schemas/atom">accepted by Periodica Mathematica Hungarica, 14 pages, no figures</arxiv:comment>
    <link href="http://arxiv.org/abs/1801.05533v2" rel="alternate" type="text/html">
    <link title="pdf" href="http://arxiv.org/pdf/1801.05533v2" rel="related" type="application/pdf">
    <arxiv:primary_category xmlns:arxiv="http://arxiv.org/schemas/atom" term="math.DG" scheme="http://arxiv.org/schemas/atom">
    <category term="math.DG" scheme="http://arxiv.org/schemas/atom">
    <category term="53D10, 53D15" scheme="http://arxiv.org/schemas/atom">
  </category></category></arxiv:primary_category></entry>
  <entry>
    <id>http://arxiv.org/abs/0802.2137v3</id>
    <updated>2008-04-01T04:36:21Z</updated>
    <published>2008-02-15T04:40:56Z</published>
    <title></title>
    <summary>
</summary>
    <author>
      <name></name>
    </author>
    <arxiv:comment xmlns:arxiv="http://arxiv.org/schemas/atom"></arxiv:comment>
    <link href="http://arxiv.org/abs/0802.2137v3" rel="alternate" type="text/html">
    <link title="pdf" href="http://arxiv.org/pdf/0802.2137v3" rel="related" type="application/pdf">
    <arxiv:primary_category xmlns:arxiv="http://arxiv.org/schemas/atom" term="math.DG" scheme="http://arxiv.org/schemas/atom">
    <category term="math.DG" scheme="http://arxiv.org/schemas/atom">
    <category term="53C30; 53C25" scheme="http://arxiv.org/schemas/atom">
  </category></category></arxiv:primary_category></entry>
</feed>

終點：

@app.route('/get_arxivpapers')
def getArxivPapers(name="einstein"):

    max_results = 2
    searchterm = name.replace("_", "&#32")
    url = 'http://export.arxiv.org/api/query?search_query=all:'   searchterm   '&start=0&'   'max_results='  str(max_results)
    data = urllib.request.urlopen(url)

    # data_dict = xmltodict.parse(data)
    # json_data = json.dumps(data_dict)
    # print(json_data)
    # return jsonify(json_data)

    return data.read().decode('utf-8')

uj5u.com熱心網友回復：

我將使用您的 JSON 源資料而不是 XML，因為這在 DataTables 中更容易處理。

這是一個基本的演示，首先是一些解釋性說明：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="arxivtable" class="display" style="width:100%">
  <thead>
      <tr>
          <th>title</th>
          <th>id</th>
          <th>link</th>
          <th>author</th>
          <th>published</th>
          <th>summary</th>
      </tr>
  </thead>
</table>


</div>

<script type="text/javascript">
    
  $(document).ready(function(){

    $('#arxivtable').DataTable({
      "ajax": {
        url: "YOUR_URL_GOES_HERE",
        dataSrc: "feed.entry"
      },
      "columns": [
        {"data": "title"},
        { "data": "id" },
        { "data": "link[].@href" },
        { "data": "author.name" },
        { "data": "published" },
        { "data": "summary" }
      ]
    });
    
  });

</script>


</body>
</html>

筆記

1 - 因為您提供了硬編碼的 HTML 列標題，所以您需要確保這些標題的數量與 DataTable 中定義的列數相匹配。或者，您可以洗掉 HTML<thead>部分并使用 DataTablescolumns.title選項。

2 - 您的 Ajax JSON 源資料包含一個陣列[ ... ]。作為 Ajax 處理選項的一部分，DataTables 需要知道該陣列在您的 JSON 回應中的位置，以便它可以遍歷該陣列。陣列中的每個元素都將用于創建一行 HTML 表格資料。ajax.dataSrc因此需要相應地設定該選項：

dataSrc: "feed.entry"

正確設定上述 Ajax JSON 起點后，您可以為每個單獨的列data值使用欄位名稱 - 如下所示。

3 - authorJSON 值實際上是一個物件：

"author": {
  "name": "Xiaomin Chen"
},

因此，您需要深入研究以獲取要在 DataTable 中顯示的欄位：

{ "data": "author.name" },

4 - 我洗掉了您的列渲染器功能以保持我的初始演示簡單，但它可用于訪問欄位和子欄位 - 并根據需要連接字串和其他值（如問題中的示例）。

5 - linkJSON 值實際上是一個物件陣列。對于我的基本演示，我剛剛訪問了該陣列中的最后一個條目，然后獲取了 href 欄位：

{ "data": "link[].@href" },

這可能不是你想要的。您可能只想選擇某種型別的鏈接，或者選擇所有鏈接，或者其他不同的鏈接。

這就是 DataTables 的處理能力有限的地方。它不能顯示這種型別的任意嵌套 JSON 值（不足為奇）。

在這種情況下，您需要在將 JSON 發送到 DataTables 之前重新構造它 - 或者在 DataTables 本身內部的dataSrc函式中重新構造它：

"dataSrc": function ( json ) { ...transform and return your JSON here... }

6 - 我不確定你想顯示什么{ "data": "journal" }。我沒有看到journalJSON 中呼叫的任何內容。

7 - 請注意，feed.entry陣列之外的所有源 JSON 資料也對 DataTables 不可用。DataTables 只能迭代該外部陣列。您可能還需要不在該外部陣列中的任何內容都需要添加到陣列中，以便 DataTables 可以訪問。

有關更多相關說明，另請參閱嵌套物件資料（陣列）和嵌套物件資料（物件）。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/490934.html

標籤：json xml 烧瓶数据表原子进料

上一篇：如何回圈使用多個物件的json資料

下一篇：為什么if和else兩個條件在JavaScript中同時執行？If和Else條件