How do you display a single row for a nested complex array of objects

Sylvia

Given this sample JSON data:

"data":[
    {
        "details":[
            {
                "year":"2017",
                "description":"bla bla bla 2017",
                "producer":"Mrs. Producer",
                "url":"www.somewhere.com/checkbox",
                "director":"Mrs. director"
            },
            {
                "year":"1991",
                "description":"bla bla bla 1992",
                "producer":"Mr. Producer",
                "url":"www.somewhere.com/checkbox",
                "director":"Mr. director"
            }
        ],
        "moviename":"Beauty and the Beast"
    },
    {
        "details":[
            {
                "year":"2012",
                "description":"bla bla bla 2012",
                "producer":"Mrs. Producer",
                "url":"www.somewhere.com/checkbox",
                "director":"Mrs. director"
            },
            {
                "year":"1994",
                "description":"bla bla bla 1994",
                "producer":"Mr. Producer",
                "url":"www.somewhere.com/checkbox",
                "director":"Mr. director"
            }
        ],
        "moviename":"Red Dawn"
    }
]

}

I want to display a single row for the nested "details" array. Expected datatable would look like

   Movie Name                  Year            Producer          Director              Description

Beauty and the Beast 1991 Mr. Producer Mr. Director bla bla bla 1991
Beauty and the Beast 2017 Mrs. Producer Mrs. Director bla bla bla 2017
Red Dawn 1984 Mr. Producer Mr. Director bla bla bla 1984
Red Dawn 2012 Mrs. Producer Mrs. Director bla bla bla 2012

Please excuse any type-0, but my goal is to produce a singe row for each year repeating the Movie name when necessary.

I am able to produce a list in a cell on a row, which not what I want.

Thanks for any help.

bindrid

How about just flattening your data?
That is what I did here http://jsbin.com/didela/edit?html,js,output

    var flatten = [];
    $.each(data.data, function(i , outter){
        $.each(outter.details, function(j,inner){
            var t = {moviename:outter.moviename,
                     year:inner.year,
                     discription: inner.description,
                     producer:inner.producer,
                     url:inner.url,
                     director:inner.director};
            flatten.push(t);
        })
    });

Sylvia

Thank you for your response. I did something similar, but it's really slow to display the table. I get a performance hit. Here is what I did:

function customizeData(result){

 $.each(result, function (idx, obj) {
     var pkgDetails = result[idx].details;
      $.each(pkgDetails, function (idx2, details) {
            details.pkgname = result[idx].pkgname;
            table.row.add(details).draw();
        });           
   });

};

I'm open for suggestions on how to make this more efficient.

Sylvia

bindrid,

Thank you so much for your help. I used your function instead and called table.rows.add(flatten).draw();

So much FASTER! Thank you -- thank you!