CODEWITHSUNDEEP
javascriptjqueryhtmljson
jcrowson
jcrowson

Reputation: 4290

Datatables using JSON response

I'm trying to load a JSON response from Google Shopping into a table in html formatted using DataTables, the JQuery plugin.

I'm appending the data to the table div but it does not seem to be working.

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Currency</th>
                <th>Price</th>
                <th>Shipping</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Currency</th>
                <th>Price</th>
                <th>Shipping</th>
            </tr>
        </tfoot>
    </table>

    <script>

        var apiKey = "key";
        var country = "US";
        var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";


        $(document).ready(function() { 

          $('#example').dataTable();

            $('.button').click(function (e) {
            $('#example').empty();
        e.preventDefault();

        $.ajax({
        type: "GET",
        url: apiurl,
        dataType: 'jsonp',
            data : 
        {
           key: apiKey, 
               country: country, 
               q: $('[name=myanswer]').val()    
            },
            success: function(data) {
            $.each(data.items, function(i, item){
            if (item.product.images.length > 0) // sanity check
            {
                //global variables
                var link = item.product.images[0]['link'];
                var title = item.product.title;
                var gtin = item.product.gtins[0];

                //price
                var currency = item.product.inventories[0]['currency'];
                var price = item.product.inventories[0]['price'];
                var shipping = item.product.inventories[0]['shipping'];

                var listData = "<li>" + title + gtin + price + currency + shipping + "</li>" + '<img title="' + title + '" src="' + link + '" />';

                var dataTable =
                "<tr>" +
                    "<td>" + '<img title="' + title + '" src="' + link + '" />' + "</td>" +
                    "<td>" + gtin + "</td>" +
                    "<td>" + title + "</td>" +
                    "<td>" + currency + "</td>" +
                    "<td>" + price + "</td>" +
                    "<td>" + shipping + "</td>" +
                    "</tr>";

                        $('#example').append(dataTable).hide().fadeIn('slow');
                        console.log(data)
   }
   });

   }
   });
   });
   });

Update: With Larry's help, I've managed to get the data loading into the table. I know this as the number at the bottom is populated. However, the data is not displaying at all.

<!DOCTYPE html>
<html>
<head>
  <style>
  #images { padding:0; margin:0; overflow: hidden;}
  #images img { width:200px; height:200px; border:none;}
  td {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 20px;
}
  #example img { width:50px; height: 50px; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jquery.dataTables.js"></script>
</head>
<body>

<form id="myform">
   <input type="text" name="myanswer" value="test">
   <input type='submit' class="button" name="submitButton" value='submit'>
</form>

<table id="example">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>

<script>

    var apiKey = "key";
    var country = "US";
    var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";


    $(document).ready(function() { 

    $('#example').dataTable();
            $('.button').click(function (e) {

            $('#example').empty();

                e.preventDefault();

                    $.ajax({
                    type: "GET",
                    url: apiurl,
                    dataType: 'jsonp',
                    data : 
                    {
                        key: apiKey, 
                        country: country, 
                        q: $('[name=myanswer]').val()   

                        },
                    success: function(data) {

                         $.each(data.items, function(i, item){

                            if (item.product.images.length > 0) // sanity check
                            {

                            //global variables
                            var link = item.product.images[0]['link'];
                            var title = item.product.title;
                            var gtin = item.product.gtins[0];

                            //price
                            var currency = item.product.inventories[0]['currency'];
                            var price = item.product.inventories[0]['price'];
                            var shipping = item.product.inventories[0]['shipping'];

                            $('#example').dataTable().fnAddData( [
                            title,
                            gtin,
                            price
                            ]);

                            }
                        });

     }
   });
  });



});


</script>
</body>
</html>

Upvotes: 3

Views: 16249

Answers (1)

Larry Lustig
Larry Lustig

Reputation: 50990

Assuming that your AJAX call is working and returning data, the proper way to append a row to a jQuery dataTable is not to attempt to edit the underlying HTML but rather to have dataTable add the row through the dataTable API call fnAddData().

There is an example here.

Upvotes: 3

Related Questions