来自 API 请求的 JQUERY 数据表

Question

我对编码很陌生。我正在尝试使用 jquery 来准备来自 API 的 JSON 文件。

我想创建一个表格，其中包含每行中每个月的股息金额、最高价和最低价的列。

这是我正在使用的 JSON。 https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY_ADJUSTED&symbol=IBM&apikey=demo

我该怎么做呢？我尝试了很多方法，但都没有成功。

下面是我的 jquery 代码，我得到的只是表中的“正在加载...”消息。这是我要学习的教程 (https://datatables.net/examples/ajax/deep.html)

$(document).ready(function () {
  $("#example").dataTable({
    ajax:
      "https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY_ADJUSTED&symbol=IBM&apikey=demo",
    columns: [
      { "Monthly Adjusted Time Series": "2020-09-25.7. dividend amount" },
      { "Monthly Adjusted Time Series": "2020-09-25.2. high" },
      { "Monthly Adjusted Time Series": "2020-09-25.3. low" }
    ]
  });
});

任何帮助将不胜感激:)

Answer 1

由于数据使用具有动态生成日期的嵌套对象作为键，因此我将通过首先发出请求并将对象映射到数据数组以传递给插件来稍微不同地做到这一点。

然后在请求和映射完成后初始化插件。

以下使用Object.entries()和Array#reduce()将对象处理成数组

getData('IBM').then(initTable)

function getData(symbol) {
  let url = 'https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY_ADJUSTED&symbol=' + symbol + '&apikey=demo';

  // return ajax promise
  return $.getJSON(url).then(function(results) {
    const dataObjects = results["Monthly Adjusted Time Series"]; 
    // convert objects to simple array       
    return Object.entries(dataObjects).reduce(function(a, [date, obj]) {
      let arr =[date].concat(Object.values(obj))
      a.push(arr)
      return a;
    }, []);
  })
}

function initTable(dataArray) {
  $('#example').DataTable({
    data: dataArray,
    columns: [
      {title:'Date'},
      {title: "Open"},
      {title: "High"},
      {title: "Low"},
      {title: "Close"},
      {title: "Adjusted Close"},
      {title: "Volume"},
      {title: "Div"}
    ]

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js'></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />

<table id="example" class="display" style="width:100%"></table>