How to load API into datatable

Question

I'm having trouble getting my data to display in a data table. I've tried pulling each object from the dataset. I have referenced these sourcess, but to no avail How do I return the response from an asynchronous call? Can't get JSON data from jQuery AJAX API call. I believe my logic is correct and not sure where I'm messing up. Please help. The api link is below. Thanks!

API

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery Datatable</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

</head>
<body>
        <table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Title</th>
                        <th>Completed</th>
                        <th></th>                    
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Id</th>
                        <th>Title</th>
                        <th>Completed</th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>
            <br><br>
            <div id="d"></div><br>
            <div id="uId"></div><br>
            <div id="Id"></div><br>
            <div id="Title"></div><br>
            <div id="Completed"></div><br>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="script.js"></script>
</body>
</html>

scripts.js

$.ajax({
    type: "GET",
    url: 'https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=BA&apikey=<myapikey>',
    dataType: 'json',
    success: function (obj) {

            $('#example').DataTable({
                data: obj,
                columns: [
                    { data: "symbol" },
                    { data: "name" },
                    { data: "region"},
                    { data: "symbol" , render : function ( data ) {
                        return "<button onclick = display(" + data + "); style='background-color:green; color: white; padding: 5px 20px 5px 20px; border: none; border-radius: 10px;'>View Details</button>";
                    }}
                ]
            });
    },
    error: function (obj) {
        alert(obj.msg);
    }
});
function display(symbol) {
    $.ajax({
        type: "GET",
        url: 'https://www.alphavantage.co/query?function=SYMBOL_SEARCH&keywords=BA&apikey=<myapikey>'+ symbol +'',
        dataType: 'json',
        success: function (obj) {
            document.getElementById("d").innerText = "Details for the selected row are below...";
            document.getElementById("uId").innerText = "Symbol: " + obj.symbol + "";
            document.getElementById("symbol").innerText = "symbol: " + obj.symbol + "";
            document.getElementById("name").innerText = "name: " + obj.name + "";
            document.getElementById("region").innerText = "region: " + obj.region + "";
        }
        ,
            error: function (obj) {
                alert(obj.msg);
            }
        });
}

score 0 · Answer 1 · answered Dec 12 '19 at 19:53

There are a couple of problems in your code.

if you inspect the JSON returned, there is an outer bestMatches field that contains the actual data
the actual field names are not the ones you use, for example symbol is really 1. symbol
DataTables allows to use nested props for the data, so you will need to escape the . in the props

So

$('#example').DataTable({
  data: obj.bestMatches,
  columns: [
    {data: "1\\. symbol"},
    {data: "2\\. name"},
    {data: "4\\. region"},
    {
      data: "1\\. symbol",
      render: function(data) {
        return "<button onclick = display(" + data + "); style='background-color:green; color: white; padding: 5px 20px 5px 20px; border: none; border-radius: 10px;'>View Details</button>";
      }
    }
  ]
});

How to load API into datatable

1 Answers1