Question

我需要将表格显示为以下信息：（实施例）

[{
    "Id":1,
    "Name":"Person1",
    "BirthDate":"0001-01-01T00:00:00",
    "Email":"some_email@gmail.com",
    "Telephone":null,
    "Notes":null,
    "Currency":{
        "Id":1,
        "Name":"EUR"
    },
    "CurrencyId":1,
    "Translations":[
        {
            "Id":1,
            "SourceLanguage":{
                "Id":3,
                "Name":"Amharic"
            },
            "SourceLanguageId":3,
            "TargetLanguage":{
                "Id":16,
                "Name":"Cherokee"
            },
            "TargetLanguageId":16,
            "Service":{
                "Id":6,
                "Name":"Legalization"
            },
            "ServiceId":6,
            "Price":15,
            "UnitMeasure":null,
            "UnitMeasureId":1
        },
        {
            "Id":2,
            "SourceLanguage":{
                "Id":3,
                "Name":"Amharic"
            },
            "SourceLanguageId":3,
            "TargetLanguage":{
                "Id":16,
                "Name":"Cherokee"
            },
            "TargetLanguageId":16,
            "Service":{
                "Id":7,
                "Name":"Recording"
            },
            "ServiceId":7,
            "Price":12,
            "UnitMeasure":null,
            "UnitMeasureId":2
        }
    ],
    "Rating":0
}]

作为一个例子，我希望有这样的东西（如果不可能的话，你能否至少建议我更接近这个？）：

| Name    | Currency | Source Language | Target Language | Price  | Service      |
----------------------------------------------------------------------------------
| Person1 | EUR      | Amharic         | Cherokee        | 15     | Legalization |
| Person1 | EUR      | Amharic         | Cherokee        | 12     | Recording    |

正如您所看到的，如果一个人有多个翻译，我想为它所拥有的每个翻译复制该行。我最终可以改变我的api实现以另一种方式返回数据，但这意味着加载服务器进行迭代等工作，我不想这样做。目前，这是我的数据表代码的一部分（根本不适用于翻译部分）

var table = $("#vendors").DataTable({
    ajax: {
        url: "/api/vendors",
        dataSrc: ""
    },
    columns: [
        {
            data: "Name",
            defaultContent: "-"
        },
        {
            data: "Currency.Name",
            defaultContent: "-"
        },
        {
            data: "Translations.SourceLanguage.Name",
            defaultContent: "-"
        },
        {
            data: "Translations.TargetLanguage.Name",
            defaultContent: "-"
        },
        {
            data: "Translations.Price",
            defaultContent: "-"
        },
        {
            data: "Translations.Service.Name",
            defaultContent: "-"
        }
    ]
});

Answer 1

解

您可以使用ajax.dataSrc选项操纵数据，为每次翻译创建重复的人。

dataSrc: function(data){
   $.each(data, function(indexPerson, person){
      $.each(person.Translations, function(indexTrans, trans){
         if(indexTrans === 0){
            person.Translation = trans;
         } else {
            var personDup = $.extend(true, {}, person);
            personDup.Translation = trans;
            delete personDup.Translations;
            data[data.length] = personDup;
         }
      });

      delete person.Translations;
   });

   return data;
}

注意

您的JSON响应应该是数组[{"Id": 1, ... }]而不是单个对象{"Id": 1, ... }。但是，如果您总是返回一个人，您也可以在dataSrc中将对象转换为数组。

样本

请参阅this example以获取代码和演示。

JQuery DataTable嵌套的对象数组

1 个答案:

解

注意

样本