Блог

Я очень новичок в программировании. Я пытаюсь использовать jquery для подготовки файла JSON из API.

Я хотел бы создать таблицу, содержащую столбцы для суммы дивидендов, высоких и низких цен за каждый месяц в каждой строке.

Вот JSON, с которым я работаю. https://www.alphavantage.co/query ?функция=TIME_SERIES_MONTHLY_ADJUSTEDamp;symbol=IBMamp;apikey=демонстрация

Как мне это сделать? Я пробовал довольно много способов, но безуспешно.

Ниже приведен мой код jquery, и все, что я получаю, это сообщение «Загрузка …» в таблице. Это руководство, по которому я иду (https://datatables.net/examples/ajax/deep.html )

 $(document).ready(function () {
  $("#example").dataTable({
    ajax:
      "https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY_ADJUSTEDamp;symbol=IBMamp;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" }
    ]
  });
});
  

Любая помощь будет оценена по достоинству 🙂

Поскольку данные используют вложенные объекты с динамически генерируемыми датами в качестве ключей, я бы сделал это немного по-другому, сначала выполнив запрос и сопоставив объекты в массив данных для передачи плагину.

Затем инициализируйте плагин после завершения запроса и сопоставления.

Следующее использует Object.entries() и Array#reduce() для обработки объектов в массив

 getData('IBM').then(initTable)

function getData(symbol) {
  let url = 'https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY_ADJUSTEDamp;symbol='   symbol   'amp;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>