Datatable JS 中的 API 数据

Posted 2023-05-08

【中文标题】Datatable JS 中的 API 数据

【英文标题】：API data in Datatable JS

【发布时间】：2020-07-21 05:41:17

【问题描述】：

我正在尝试在 Datatable JS 中显示来自 API 的所有内容。 我的 API 结构是这样的

  "Success": 
    "Meta": 
      "Id": "124578828",
      "Action": "ItemList",
      "Type": "Item"
    ,
    "Body": 
      "TotalItems": 18,
      "Item": [
        
          "Category": "Clothing",
          "ItemId": 12354,
          "Attributes": 
            "name": "Tee 1",
            "brand": "Brand 2",
            "material_type": "Cotton",
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
          ,
          "Skus": [
            
              "Status": "active",
              "stock": 20,
              "Images": [
                "images/tee1_01.jpg",
                "images/tee1_02.jpg",
                "images/tee1_03.jpg",
                "",
                "",
                "",
                "",
                ""
              ],
              "Sku": "TEE-001233",
              "Url": "#",
              "price": 20,
              "Available": 12
            
          ]
        
      ]
    
  

试图显示项目 Success.Body.Item[].Attributes.name,Success.Body.Item[].Attributes.brand, Success.Body.Item[].Skus[].Images[0] & Success.Body.Item[].Skus[].price in columns

<script>
     $(document).ready(function() 


         $('#data-table').DataTable(
             "ajax": "GetProducts.json",
             "columns": [
                     "data": "Success.Body.Item[].Attributes.name"
                 ,
                 
                     "data": "Success.Body.Item[].Attributes.brand"
                 ,
                 
                     "data": "Success.Body.Item[].Skus[].Images[0]"
                 ,
                 
                     "data": "Success.Body.Item[].Skus[].price"
                 
             ]
         );
     );
 </script>

【参考方案1】：

你好，你可以这样写

function table() 
fetch(urlApi)
  .then(res => res.json())
  .then(datos => 
    document.querySelector('#table').innerhtml = `
                    <tr>
                    <th>$ datos.Success.Body.Item[0].Attributes.name</th>
                    <td>$ datos.Success.Body.Item[0].Attributes.model</td> 
                    <td>$ datos.Success.Body.Item[0].Skus[0].Images</td>
                    <td>$ datos.Success.Success.Body.Item[0].Skus[0].price</td>
                </tr>
             `

  )

如果您将答案保存在变量中（例如 a），您可以获得如下数据：

a.Success.Body.Item[0].Skus[0].price

【讨论】：

这解决了尝试使用 Item[] 的问题 - 但也许你可以解释它为什么/如何解决这个问题？另一方面，DataTables 具有对 JSON 的内置处理，因此不需要通过这种方式使用 javascript/HTML 进行 DOM 操作。