user3222157 user3222157 - 3 months ago 16
Javascript Question

How to load local json data into datatable plugin in jquery

Here have load local json data using datatable plugin.Used keyword data to initialize the json data but not yet manipulate json data into table tr. i have given my json code an d js code and html code. kindly help me to sort it out this issue.

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

Answer

Your problem is the "category" property: it is an array.

A possible workaround is to convert your object "json.documentAll.document" to an array and use it like in the following snippet:

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>