Как я буду отображать вложенный массив объектов продаж для каждого клиента в DataTable? - PullRequest
0 голосов
/ 23 апреля 2020
{
  "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 Luke Finisher 2020-04-22T18: 30: 00.000Z 10 23000 Andy Starter 2020-04-22T18: 30: 00.000Z 10 22000 'столбцы': [{'data': 'customer_name', 'defaultContent': '-',

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

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

        }],

1 Ответ

0 голосов
/ 23 апреля 2020

Я думаю, что вы пытаетесь создать такую ​​таблицу:

enter image description here

Нам гораздо проще обрабатывать данные, если мы - упорядочить это сначала, преобразовав это в это:

{
    "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, Вы можете использовать вышеуказанную функцию для предварительной обработки данных.

Пример:

Специально посмотрите на строку инициализации DataTable:

  "data": getFlattenedJson(),

Один последний комментарий: в моем примере я жестко закодировал JSON в HTML. В вашем случае вы, вероятно, используете Ajax для обработки на стороне сервера.

Поэтому вам необходимо (а) интегрировать это в ваш фактический код инициализации DataTable. И (b) вам , вероятно, потребуется изменить последнюю строку функции JavaScript на эту:

return flatJson;

вместо этого:

return flatJson["data"];

Это сделано для того, чтобы переменные обработки на стороне сервера, такие как recordsFiltered и recordsTotal, не терялись.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...