Display JSON object using DataTables

Question

I'm trying to display JSON results using DataTables, however I get blank table in the end. When I check browser console logs, I can see array of objects is being passed to display function but after that, nothing happens.

HTML Part:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="functions.js"></script>
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>

    <div class="container">
        <form>
            <div class="form-group row">
              <label for="foodLabel" class="col-sm-2 col-form-label">Search For Food Label</label>
              <div class="col-sm-10">
                <input class="form-control" type="search" id="foodLabel">
              </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default" type="submit" id="submit" onclick="getFormData(); return false;">Submit</button>
                </div>
            </div>
        </form>
    </div>

    <table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
    </table>

  </body>
</html>

JS Part:

function getFormData(){ 
    var foodLabel=document.getElementById('foodLabel').value;
    document.getElementById('foodLabel').value = "";
    var searchURL = buildSearchURL(foodLabel);
    console.log(searchURL);

    $.getJSON(searchURL, function(data){
        //console.log(data);
        //console.log(data.list.item);
        display(data.list.item);
    });

}

function buildSearchURL(label){
    var searchURL = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + label + "&sort=n&max=25&offset=0&api_key=DEMO_KEY";
    return searchURL;
}

function display(data){
    console.log(data);
    $(document).ready(function() {
        $('#example').DataTable( {
            "json": data,
            "columns": [
                {"item": "name"}
            ]
        } );
    } );    
}

It must be something completely obvious that I'm missing here.

I managed to figure this one out, apparently, Datatables library makes a call on it's, so I changed my display function:

function display(searchURL){
    //console.log(data);
    $(document).ready(function() {
        $('#example').DataTable( {
            ajax: {
                url: searchURL,
                dataSrc: 'list.item'
            },
            columns: [
                {data: "name"}
            ]
        } );
    } );    
}

score 1 · Accepted Answer · answered Jan 27 '17 at 14:44

You can not access the variable searchURL in display function, try this:

function display(searchURL){
    //console.log(data);
    $(document).ready(function() {
        $('#example').DataTable( {
            ajax: {
                 url:buildSearchURL(document.getElementById('foodLabel').value),
                dataSrc: 'list.item'
            },
            columns: [
                {data: "name"}
            ]
        } );
    } );    
}

Display JSON object using DataTables

1 Answers1

Linked