How to append REST call JSON response to jQuery da

Question

I'm trying to display the REST call JSON response in jQuery datatables.

Below is the JSON response I'm receiving.

{
    "artifact": [
        {
            "artifactId": "I8cc4a96ef69a11e08b448cf533780ea2",
            "batchId": "15581",
            "processId": "115458787"
        },
        {
            "artifactId": "e08b448cf533780ea2I8cc4a96ef69a11",
            "batchId": "14962",
            "processId": "787974254"
        }
    ]
}

The Script:

<script type="text/javascript">
        $(document).ready(function () {
            $("#artifacts").dataTable({
                "sPaginationType": "full_numbers",
                "bJQueryUI": true
            });
        });
        function submitForm()
        {
            $.getJSON('http://myurl.com/JerseySample/rest/search', function(data) {
                $.each(data.artifact, function(i,artifact){
                        $('#artifacts').datatable().fnAddData([
                                artifact.artifactId,
                                artifact.batchId,
                                artifact.processId ]
                                );
                });
             });
        }
</script>

The HTML:

<form class="searchform">
        <input class="searchfield" type="text" /> 
        <input class="searchbutton" type="button" value="Go" id="go" onclick="submitForm()" /> 

</form>
    <div id="container">
        <div id="demo_jui">
            <table id="artifacts" class="display">
                    <thead>
                            <tr>
                                <th>Artifact Id</th>
                                <th>Batch Id</th>
                                <th>Legacy Id</th>
                            </tr>
                    </thead>
                    <tbody>
                    </tbody>
            </table>
        </div>
    </div>

Can someone provide an answer on why I am unable to load the JSON response into datatable? Is there a better approach to get this functionality?

Answer 1

You're doing everything right, you're just doing one rookie mistake, and it's easy to miss.

When you do

$("#artifacts").dataTable();

You're creating a new datatable instance. Datatables returns the object instance (with API functions) on that call, but you're not storing that instance anywhere, therefor, you lose all reference to the datatable you just created.

To solve this, just add a reference to the datatable you create like so

var thisTable = $("#artifacts").dataTable(
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
    }
);

and then reference it in your each function

$.each(data.artifact, function(i,artifact){
    thisTable.fnAddData(
        [
            artifact.artifactId,
            artifact.batchId,
            artifact.processId 
        ]
    );
 });

Here's a JSFiddle example to see it in action.

The dynamically add new row example on datatables.net is fairly poor, since it's doing an inline API call without the need to add a reference. It is better demonstrated on their following example on multi filtering.

You could also read about it on their API documentation.
Hint: it is demonstrated in the first row under $