如何将本地json数据加载到jquery中的数据表插件中

Question

我已经使用数据表插件加载了本地 json 数据。我使用关键字 data 来初始化 json 数据，但尚未将该数据操作到表 tr 中。我的代码在 jsfiddle 链接中。

        check this fiddle link : <a href="https://jsfiddle.net/qatrasjg/">fiddle </a> jsfiddle.net/qatrasjg

Answer 1

您的问题是“类别”属性：它是一个数组。

一种可能的解决方法是将您的对象“json.documentAll.document”转换为一个数组并像下面的 sn-p 一样使用它：

var json = {
  "category": [{
    "title": "Customer Satisfaction",
    "id": "nnanet:category/certified-pre-owned",
    "items": [{
      "title": "Bulletins",
      "id": "nnanet:category/customer-satisfaction/bulletins"
    },
              {
                "title": "Consumer Affairs",
                "id": "nnanet:category/customer-satisfaction/consumer-affairs",
                "threelevelItem": [{
                  "title": "TOI",
                  "id": "nnanet:category/retailer-digital-marketing/toi"
                },
                                   {
                                     "title": "TOI",
                                     "id": "nnanet:category/retailer-digital-marketing/toi"
                                   }
                                  ]
              }, {
                "title": "Loyalty",
                "id": "nnanet:category/customer-satisfaction/loyalty"
              }]
  },
               {
                 "title": "Parts",
                 "id": "nnanet:category/parts",
                 "items": []
               },
               {
                 "title": "Retailer Digital Marketing",
                 "id": "nnanet:category/retailer-digital-marketing",
                 "items": [{
                   "title": "TOI",
                   "id": "nnanet:category/retailer-digital-marketing/toi",
                   "threelevelItem": [{
                     "title": "TOI",
                     "id": "nnanet:category/retailer-digital-marketing/toi"
                   },
                                      {
                                        "title": "TOI",
                                        "id": "nnanet:category/retailer-digital-marketing/toi"
                                      }
                                     ]
                 },
                           {
                             "title": "Basics",
                             "id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
                           },
                           {
                             "title": "International",
                             "id": "nnanet:category/retailer-digital-marketing/international",
                             "threelevelItem": [
                               {
                                 "title": "TOI",
                                 "id": "nnanet:category/retailer-digital-marketing/toi"
                               },
                               {
                                 "title": "TOI",
                                 "id": "nnanet:category/retailer-digital-marketing/toi"
                               }
                             ]
                           }]
               },
               {
                 "title": "Parts",
                 "id": "nnanet:category/parts",
                 "items": []
               },
               {
                 "title": "Remarketing",
                 "id": "nnanet:category/remarketing",
                 "items": []
               },
               {
                 "title": "Finance Today",
                 "id": "nnanet:category/customer-satisfaction/bulletins/finance-today",
                 "items": [{
                   "title": "TOI",
                   "id": "nnanet:category/retailer-digital-marketing/toi"
                 }, {
                   "title": "Basics",
                   "id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
                 }, {
                   "title": "International",
                   "id": "nnanet:category/retailer-digital-marketing/international"
                 }]
               },
               {
                 "title": "Annual",
                 "id": "nnanet:category/customer-satisfaction/bulletins/finance-today/revenue/annual",
                 "items": [{
                   "title": "TOI",
                   "id": "nnanet:category/retailer-digital-marketing/toi"
                 }, {
                   "title": "Basics",
                   "id": "nnanet:category/retailer-digital-marketing/reference-guide/basics"
                 }, {
                   "title": "International",
                   "id": "nnanet:category/retailer-digital-marketing/international"
                 }]
               }
              ],
  "category-favorite": [
    {
      "title": "Accessories",
      "id": "nnanet:category/accessories",
      "fav-sub-category": []
    },
    {
      "title": "Customer Satisfaction",
      "id": "nnanet:category/customer-satisfaction",
      "fav-sub-category": [
        {
          "title": "TOI",
          "id": "nnanet:category/customer-satisfaction/toi"
        }
      ]
    }
  ],
  "documentAll": {
    "document": [
      {
        "documentTitle": "DPS DataModel",
        "documentUrl": "/content/dam/nnanet/documents/nissan/us/en_us/Dealer Portal Data Model.pdf",
        "category": [
          "F&i "
        ],
        "publishedDate": "12 August 2016, 08:14 PM",
        "lastUpdatedDate": "09 August 2016, 08:13 PM"
      },
      {
        "documentTitle": "Sightly Docx",
        "documentUrl": "/content/dam/nnanet/documents/nissan/us/en_us/sightly.docx",
        "category": [
          "Accessories ",
          "General ",
          "Parts ",
          "Operational readiness "
        ],
        "publishedDate": "10 August 2016, 01:55 PM",
        "lastUpdatedDate": "09 August 2016, 01:53 PM"
      }
    ],
    "totaldocs": 2
  }
};

$(function () {
  var data = json.documentAll.document.map(function (val, index) {
    return [val.documentTitle, val.category.join(','), val.publishedDate, val.lastUpdatedDate];
  });
  $('#documentListing-data').DataTable({
    data: data,
    pageLength: 5,
    columnDefs: [{
      "targets": [0],
      "orderable": true
    }, {
      "targets": [1, 3],
      "orderable": false
    }]
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>

<table id="documentListing-data" class="table documentList-table">
    <thead>
    <tr class="document-header">
        <th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> Name</th>
        <th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> Category</th>
        <th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> PublishedDate</th>
        <th style="text-align: center;padding: 7px;font-family: NissanAG-Medium;font-size: 12pt;color:#000;"> LastUpdated Date</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>