如何将 API 加载到数据表中答案

【问题标题】：How to load API into datatable如何将 API 加载到数据表中
【发布时间】：2020-04-06 03:35:53
【问题描述】：

我无法让我的数据显示在数据表中。我尝试从数据集中提取每个对象。我参考了这些来源，但无济于事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);
            }
        });
}

【问题讨论】：

标签： javascript json ajax api datatables

【解决方案1】：

您的代码中有几个问题。

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

所以

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

【讨论】：