Proper way to populate a Google data table with dynamically generated JSON

Question

I'm trying to make a Google data grid (using gstatic.com) as part of an MVC .net Core project. I am returning Json from a controller to the view. The json I am receiving looks correct (I believe), but I have not been able to figure out how to get the json to dynamically create rows in the data grid. I've look around at different articles, but haven't found now that works.

Here's what I've got

The controller:

[HttpPost]
public JsonResult ReportJson(string dateFrom, string dateTo, string ticketNumber, string stationId, string LoadingFile)
{

    DateTime dateStart = Convert.ToDateTime(dateFrom);
    DateTime dateEnd = Convert.ToDateTime(dateTo);

    List<ReportDTO> ds = new List<ReportDTO>();

    ds = repo.GetReport(dateStart, dateEnd, ticketNumber, stationId, LoadingFile);

    string objectString = ds.ToString();

    var o = JsonConvert.SerializeObject(ds);

    return Json(o);
}

It's returning json that looks like this:

[{"Id":0,"TicketNumber":"100000","ConfirmedTicketNumber":null,"GroupName":"HIGHWAY X","LactNumber":"5","LoadDateTime":"2019-10-31T00:00:00","BolNumber":"123456","LeaseNumber":"12345","LeaseName":"My Lease","DriverName":"SMITH, BOBBY","TruckNumber":"1","CarrierName":"NEW CARRIER","GrossBbl":18.02,"Gsv":18.36,"Api":39.00,"Deg":104.90,"Gross":85.0,"NetVolume":131.5,"OrdHdrnumber":0,"RefNumber":null,"CmdName":"NEW TICKET","CmdCode":"ABC-123","AverageLineTemp":100.0,"HighTemp":0.00,"BottomTemp":0.00,"OrdConsignee":null,"OrdConsigneeName":null,"DestCmpId":"ABC3","DestCmpName":"SOME DATA","OrdCompletiondate":"2019-10-31T00:00:00","Notes":null,"Timestamp":"2019-10-31T00:00:00","ModifiedBy":"Joe","LoadingFile":"template.xlsx","UpdatingRecordMessage":null,"RecordErrored":false,"DateFrom":null,"DateTo":null},
{"Id":1,"TicketNumber":"100001","ConfirmedTicketNumber":null,"GroupName":"HIGHWAY X","LactNumber":"10","LoadDateTime":"2019-10-31T00:00:00","BolNumber":"234567","LeaseNumber":"12345","LeaseName":"My Lease","DriverName":"SMITH, BOBBY","TruckNumber":"1","CarrierName":"NEW CARRIER","GrossBbl":5.5,"Gsv":6.6,"Api":40.00,"Deg":45.9,"Gross":88.0,"NetVolume":144.0,"OrdHdrnumber":0,"RefNumber":null,"CmdName":"NEW TICKET 2","CmdCode":"ABC-456","AverageLineTemp":50.0,"HighTemp":50.00,"BottomTemp":50.00,"OrdConsignee":null,"OrdConsigneeName":null,"DestCmpId":"ABC3","DestCmpName":"SOME MORE DATA","OrdCompletiondate":"2019-10-31T00:00:00","Notes":null,"Timestamp":"2019-10-31T00:00:00","ModifiedBy":"Joe","LoadingFile":"template.xlsx","UpdatingRecordMessage":null,"RecordErrored":false,"DateFrom":null,"DateTo":null}]

Here is my relevant code in the razor page:

<div id="table_div"></div>
<input type="button" value="Call Json" onclick="loadChart()"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      //google.charts.setOnLoadCallback(drawTable);

    function loadChart() {
        $.ajax(  
        {  
            type: 'POST',  
            data: $('#DataQuery').serialize(),
            dataType: 'JSON',  
            url: '/Report/ReportJson',  
            success:  
                function (response)  
                {  
                    drawTable(response);
                }  
        });
    }


    function drawTable(response) {

        var json_data = JSON.parse(response);

        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Api');
        data.addColumn('string', 'AverageLineTemp');
        data.addColumn('string', 'BolNumber');
        data.addColumn('string', 'BottomTemp');
        data.addColumn('string', 'CarrierName');
        data.addColumn('string', 'CmdCode');
        data.addColumn('string', 'CmdName');
        data.addColumn('string', 'ConfirmedTicketNumber');
        data.addColumn('string', 'DateFrom');
        data.addColumn('string', 'DateTo');
        data.addColumn('string', 'Deg');
        data.addColumn('string', 'DestCmpId');
        data.addColumn('string', 'DestCmpName');
        data.addColumn('string', 'DriverName');
        data.addColumn('string', 'Gross');
        data.addColumn('string', 'GrossBbl');
        data.addColumn('string', 'GroupName');
        data.addColumn('string', 'Gsv');
        data.addColumn('string', 'HighTemp');
        data.addColumn('string', 'Id');
        data.addColumn('string', 'LactNumber');
        data.addColumn('string', 'LeaseName');
        data.addColumn('string', 'LeaseNumber');
        data.addColumn('string', 'LoadDateTime');
        data.addColumn('string', 'LoadingFile');
        data.addColumn('string', 'ModifiedBy');
        data.addColumn('string', 'NetVolume');
        data.addColumn('string', 'Notes');
        data.addColumn('string', 'OrdCompletiondate');
        data.addColumn('string', 'OrdConsignee');
        data.addColumn('string', 'OrdConsigneeName');
        data.addColumn('string', 'OrdHdrnumber');
        data.addColumn('string', 'RecordErrored');
        data.addColumn('string', 'RefNumber');
        data.addColumn('string', 'TicketNumber');
        data.addColumn('string', 'Timestamp');
        data.addColumn('string', 'TruckNumber');
        data.addColumn('string', 'UpdatingRecordMessage');

        //ADD ROWS????

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    }
</script>

The portion with the question marks (where the rows should be added) is where I am getting stuck. I have tried different approaches based on different articles on how to turn the response from the controller into rows using Data.Addrows() and Data.Addrow(), but each approach I tried has given me a different error. Instead of asking what was wrong in each case, I thought I'd just ask what the right approach would be. What is missing to make this work properly?

Answer 1

Have you checked the 3rd method(JavaScript Literal Initializer) on the doc? Google and people say it's a common approach in web service.