HTML/Javascript Datatables JSON Daten über Alphavantage API einfügen

Muvels · 29. März 2021

Hallo alle zusammen ich frage auch nochmla hier, ich versuche mithilfe der Alpha Vantage Api die Kursdaten einer Aktie in eine Datatables Tabelle zu bekommen, mein HTML Code sieht so aus:

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>open</th>
                        <th>high</th>
                        <th>low</th>   
                        <th>close</th>   

                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>open</th>
                        <th>high</th>
                        <th>low</th>   
                        <th>close</th>     
                     
                    </tr>
                </tfoot>
            </table>
            <br><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>
</body>
</html>

Alles anzeigen

Un mein Javascript Code ist:

Code

<script>
$.ajax({
    type: "GET",
    url: 'https://www.alphavantage.co/query?function=TIME_SERIES_WEEKLY_ADJUSTED&symbol=TSCO.LON&apikey=demo',
    dataType: 'json',
    success: function (obj) {
    $('#example').DataTable({
  data: obj,
  columns: [
    {data: "1\\. open"},
    {data: "2\\. high"},
    {data: "3\\. low"},
     {data: "4\\. close"}
  ]
});
    },
    error: function (obj) {
        alert(obj.msg);
    }
});

</script>

Alles anzeigen

Jedoch werden die Kursdaten nicht in der Tabelle angezeigt, ich habe es auch schon über die CSV Schnittstelle von Alpha Vantage verscuht, das hat aber auch nicht funktioniert, könnte mir jemand sagen wo der Fehler ist ?

Vielen Dank schon mal

Das ist übrigens die API abfrage welche ich in die Tabelle haben möchte:

https://www.alphavantage.co/qu…mbol=TSCO.LON&apikey=demo

Sempervivum · 29. März 2021

Offenbar versteht Datatables die Struktur, die deine API liefert, nicht. Der einfachste Weg ist, die Antwort vorzuverarbeiten und in ein Format für Datatables zu bringen. Dieses funktioniert bei mir:

Code

<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>date</th>
                <th>open</th>
                <th>high</th>
                <th>low</th>
                <th>close</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>date</th>
                <th>open</th>
                <th>high</th>
                <th>low</th>
                <th>close</th>

            </tr>
        </tfoot>
    </table>
    <br><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>
        $.ajax({
            type: "GET",
            url: 'thread603-api-intest-rates.json',
            dataType: 'json',
            success: function (response) {
                let data = [];
                const obj = response["Weekly Adjusted Time Series"];
                for (key in obj) {
                    let rc = [];
                    let val = obj[key];
                    rc.push(key);
                    rc.push(val["1. open"]);
                    rc.push(val["2. high"]);
                    rc.push(val["3. low"]);
                    rc.push(val["4. close"]);
                    data.push(rc);
                }
                console.log(data);
                $('#example').DataTable({
                    data: data
                });
            },
            error: function (obj) {
                alert(obj.msg);
            }
        });
    </script>
</body>

Alles anzeigen

Ich war der Meinung, dass die Ausgabe nur Sinn macht, wenn man das Datum mit anzeigt, daher habe ich es hinzu gefügt.

Datatables unterstützt auch Ajax und man kann auch dort ein Vorverarbeitung durchführen:

https://datatables.net/reference/option/ajax.dataSrc

Damit geht es dann etwas kompakter und eleganter:

Code

        $('#example').DataTable({
            "ajax": {
                "url": "thread603-api-intest-rates.json",
                "dataSrc": function (response) {
                    let data = [];
                    const obj = response["Weekly Adjusted Time Series"];
                    for (key in obj) {
                        let rc = [];
                        let val = obj[key];
                        rc.push(key);
                        rc.push(val["1. open"]);
                        rc.push(val["2. high"]);
                        rc.push(val["3. low"]);
                        rc.push(val["4. close"]);
                        data.push(rc);
                    }
                    return data;
                }
            }
        });

Alles anzeigen

HTML/Javascript Datatables JSON Daten über Alphavantage API einfügen

Jetzt mitmachen!

Teilen

Tags