Question

我无法让我的数据显示在数据表中。我尝试过从数据集中提取每个对象。我已经引用了这些来源，但无济于事How do I return the response from an asynchronous call? Can't get JSON data from jQuery AJAX API call。我相信我的逻辑是正确的，不确定我在搞砸。请帮忙。 api链接在下面。谢谢！

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);
            }
        });
}

Answer 1

您的代码中有几个问题。

如果您检查返回的JSON，则会有一个外部bestMatches字段，其中包含实际数据
实际的字段名称不是您使用的名称，例如symbol确实是1. symbol
DataTables允许对数据使用嵌套的道具，因此您需要在道具中转义.

所以

$('#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>";
      }
    }
  ]
});

如何将API加载到数据表中

1 个答案: