JQuery DataTable nested array of objects

Question

I need to display as a table the following information: (example)

[{
    "Id":1,
    "Name":"Person1",
    "BirthDate":"0001-01-01T00:00:00",
    "Email":"[email protected]",
    "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
}]

As an example, I would like to have something like this (if it's not possible, can you at least suggest me something closer to this?):

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

As you can see, if a person has multiple translations I would like to duplicate the row for every translation it has. I can ultimately change my api implementation to return the data in another way, but that would mean to load the server with the work of iterating etc and I don't want that. Currently, this is part of my datatable code (that doesn't work at all for the translations part)

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: "-"
        }
    ]
});

you can look for sub tables for variable data like price, service in your case, datatables.net/examples/api/row_details.html — Anil
– Anil, Commented Mar 2, 2017 at 12:14
Yes, thank you, indeed I can make those as subtables, but I'm looking for a way to display Target/Source Language and even more....a new entry in the table for every translation object it has. — Robert
– Robert, Commented Mar 2, 2017 at 12:17

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

SOLUTION

You can manipulate the data using ajax.dataSrc option to create duplicate persons for each translation.

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;
}

NOTES

Your JSON response should be an array [{"Id": 1, ... }] and not a single object {"Id": 1, ... }. However if you will be always returning a single person, you can convert object to array in the dataSrc as well.

DEMO

See this example for code and demonstration.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 2, 2017 at 12:36

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert Over a year ago

Yes, my response is an array, I just forgot to include it in the question. I will correct this.

Robert Over a year ago

Just one problem I found (it's in your example too), in the function you just duplicate the same translation...

Robert Over a year ago

Thank you. Now it's perfect.

Collectives™ on Stack Overflow

JQuery DataTable nested array of objects

1 Answer 1

SOLUTION

NOTES

DEMO

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

SOLUTION

NOTES

DEMO

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related