DataTable Ajax Nested List - ajax

Question

I am returning a nested list of json from an Ajax call and would like to populate my data table with this. F
or example: In my C# Class:
public class Product_Browser : Json_Response
{
public List<PRODUCT_TABLE> ProductData { get; set; }
public List<ProductPlans> ProductPlan { get; set; }
}
Javascript function:
$dtBrowser = $(dtElementID).dataTable({
filter: false,
serverSide: true,
processing: true,
responsive: true,
ajax: {
url: _Url,
type: "GET",
"dataSrc": function (jsonObj) {
console.log(jsonObj)
return jsonObj
}
},
columns: [
{ data: "ProductData.ProductKey", title:"Key", visible: true },
{ data: "ProductPlan.PlanID", title: "Id", visible: true },
],
order: [[1, "desc"]],
});
}
Now when i log the jsonObj it is valid JSON, but in my columns, data I don't know the correct way of accessing the two different lists of objects. I am able to do it for one list by changing the dataSrc to return jsonObj.ProductData but I need both pieces of data.
This is what my JSON looks like:
{
"ProductData": [
{
"ProductKey": 102234,
"ProductID": "TEST1",
},
{
"ProductKey": 102310,
"ProductID": "TEST2",
},
{
"ProductKey": 102319,
"ProductID": "TEST3",
},
],
"ProductGrabBagPlan": [
{
"PlanID": 1,
"ProductKey": 102234
},
{
"PlanID": 2,
"ProductKey": 102310
},
{
"PlanID": 3,
"ProductKey": 102319
},
],
"Success": true,
"Messages": [],
}