Question

{
  "draw": "1",
  "recordsFiltered": 2,
  "recordsTotal": 2,
  "data": [{
    "_id": "5ea15cad9eceb1681dfba55f",
    "customer_name": "Luke",
    "sales": [{
      "stock_type": "Starter",
      "sales_date": "2020-04-22T18:30:00.000Z",
      "sales_quantity": 10,
      "sales_total_price": 22000
    }, {
      "stock_type": "Finisher",
      "sales_date": "2020-04-22T18:30:00.000Z",
      "sales_quantity": 10,
      "sales_total_price": 23000
    }],
    "id": "5ea15cad9eceb1681dfba55f"
  }, {
    "_id": "5ea15cd69eceb1681dfbb95e",
    "customer_name": "Andy",
    "sales": [{
      "stock_type": "Starter",
      "sales_date": "2020-04-22T18:30:00.000Z",
      "sales_quantity": 10,
      "sales_total_price": 22000
    }],
    "id": "5ea15cd69eceb1681dfbb95e"
  }]
}

我想得到的输出是： Luke Starter 2020-04-22T18：30：00.000Z 10 22000 卢克修整机2020-04-22T18：30：00.000Z 10 23000 Andy Starter 2020-04-22T18：30：00.000Z 10 22000 '列'： [{ '数据'：'客户名称'， 'defaultContent'：'-'，

        }, {
            'data': 'sales.sales_quantity',
            'defaultContent': '-',
        }, {
            'data': 'sales.stock_type',
            'defaultContent': '-',

        }, {
            'data': 'sales.sales_date',
            'defaultContent': '-',

        }],

Answer 1

我认为您要尝试创建的表如下：

如果先将数据转换为以下数据，则可以更轻松地处理数据：

{
    "draw": "1",
    "recordsFiltered": 2,
    "recordsTotal": 2,
    "data": [{
        "id": "5ea15cad9eceb1681dfba55f",
        "customer_name": "Luke",
        "stock_type": "Starter",
        "sales_date": "2020-04-22T18:30:00.000Z",
        "sales_quantity": 10,
        "sales_total_price": 22000
    }, {
        "id": "5ea15cad9eceb1681dfba55f",
        "customer_name": "Luke",
        "stock_type": "Finisher",
        "sales_date": "2020-04-22T18:30:00.000Z",
        "sales_quantity": 10,
        "sales_total_price": 23000
    }, {
        "id": "5ea15cd69eceb1681dfbb95e",
        "customer_name": "Andy",
        "stock_type": "Starter",
        "sales_date": "2020-04-22T18:30:00.000Z",
        "sales_quantity": 10,
        "sales_total_price": 22000
    }]
}

这就是我所说的“扁平化”数据的意思。我们已删除了原始JSON中的嵌套子对象。

现在，每个“数据”对象都映射到表中的一行。

您可以通过多种方式执行此操作。一个示例如下：

function getFlattenedJson() {
  var flatJson = {};
  for (var key in myJson) {
    if (myJson.hasOwnProperty(key) && key !== "data") {
      flatJson[key] = myJson[key];
    } else {
      flatJson["data"] = [];
      myJson["data"].forEach(function (item, index) {
        var id = item["id"];
        var customer_name = item["customer_name"];
        item["sales"].forEach(function (sale, index) {
          sale["id"] = id;
          sale["customer_name"] = customer_name;
          flatJson["data"].push(sale);
        });
      });
    }
  }
  return flatJson["data"];
}

上面的代码中没有验证，因此不适合生产。

现在，在初始化DataTable时，可以使用上面的函数对数据进行预处理。

一个例子：

<body>

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

<table id="example" class="display dataTable cell-border" style="width:100%">
    <thead> 
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Date</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
</table>

</div>

<script type="text/javascript">

  var myJson = {
    "draw": "1",
    "recordsFiltered": 2,
    "recordsTotal": 2,
    "data": [{
        "_id": "5ea15cad9eceb1681dfba55f",
        "customer_name": "Luke",
        "sales": [{
            "stock_type": "Starter",
            "sales_date": "2020-04-22T18:30:00.000Z",
            "sales_quantity": 10,
            "sales_total_price": 22000
        }, {
            "stock_type": "Finisher",
            "sales_date": "2020-04-22T18:30:00.000Z",
            "sales_quantity": 10,
            "sales_total_price": 23000
        }],
        "id": "5ea15cad9eceb1681dfba55f"
    }, {
        "_id": "5ea15cd69eceb1681dfbb95e",
        "customer_name": "Andy",
        "sales": [{
            "stock_type": "Starter",
            "sales_date": "2020-04-22T18:30:00.000Z",
            "sales_quantity": 10,
            "sales_total_price": 22000
        }],
        "id": "5ea15cd69eceb1681dfbb95e"
    }]
};

  // https://stackoverflow.com/questions/61383626/how-will-i-display-the-nested-sales-array-of-object-for-each-customer-in-datatab
  function getFlattenedJson() {
    var flatJson = {};
    for (var key in myJson) {
      if (myJson.hasOwnProperty(key) && key !== "data") {
        flatJson[key] = myJson[key];
      } else {
        flatJson["data"] = [];
        myJson["data"].forEach(function (item, index) {
          var id = item["id"];
          var customer_name = item["customer_name"];
          item["sales"].forEach(function (sale, index) {
            sale["id"] = id;
            sale["customer_name"] = customer_name;
            flatJson["data"].push(sale);
          });
        });
      }
    }
    return flatJson["data"];
  }

  $(document).ready(function() {
    $('#example').DataTable( {
      "processing": true,
      "data": getFlattenedJson(),
      "columns": [
        { data: "customer_name" },
        { data: "stock_type" },
        { data: "sales_date" },
        { data: "sales_quantity" },
        { data: "sales_total_price" }
      ]
    });
  });
</script>

</body>

具体看一下DataTable初始化行：

  "data": getFlattenedJson(),

最后一条评论：在我的示例中，我已将JSON硬编码到HTML中。就您而言，您可能正在将Ajax用于服务器端处理。

因此，您将需要（a）将其集成到实际的DataTable初始化代码中。并且（b）您可能需要将JavaScript函数的最后一行更改为此：

return flatJson;

代替此：

return flatJson["data"];

这样做是为了避免丢失服务器端处理变量，例如recordsFiltered和recordsTotal。

如何在DataTable中显示每个客户的嵌套销售对象数组？

1 个答案: