So zeigen Sie den JSON-API-Feed mithilfe von JavaScript in einer HTML-Seite an

Question

Ich möchte das neueste Ergebnis aus dem folgenden Feed mit JQuery in einer HTML-Seite anzeigen. Wie kann ich das machen?

https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=15min&outputsize=full&apikey=demo

$.getJSON('https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=15min&outputsize=full&apikey=demo', function(data) { 
 
    var text = `Meta Data: ${data.Meta Data}` 
 
    $(".mypanel").html(text); 
 
});

<div class="mypanel"></div>

Answer 1

Sie müssen die erste der Objektschlüssel zu erhalten und müssen Sie ["..."] für die Meta-Daten verwenden, da es einen Raum hat:

$.get("https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=15min&outputsize=full&apikey=demo", function(data) { 
 
    var $dl1 = $("#dl1"), 
 
    $dl2 = $("#dl2"); 
 

 
    $.each(data["Meta Data"], function(key, value) { 
 
    $dl1 
 
     .append($('<dt>').html(key.replace(/ /g,"&nbsp;"))) 
 
     .append($('<dd>').text(value)); 
 
    }); 
 
    var first = Object.keys(data["Time Series (15min)"])[0]; 
 
    $.each(data["Time Series (15min)"][first], function(key, value) { 
 
    if (key!="5. volume"){ 
 
     $dl2 
 
     .append($('<dt>').text(key)) 
 
     .append($('<dd>').text(value)); 
 
    } 
 
    }); 
 
});

dl { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: #ffa; 
 
    padding: 0; 
 
    margin: 0 
 
} 
 
dt { 
 
    float: left; 
 
    width: 50%; 
 
    /* adjust the width; make sure the total of both is 100% */ 
 
    background: #ccc; 
 
    padding: 0; 
 
    margin: 0 
 
} 
 
dd { 
 
    float: left; 
 
    width: 50%; 
 
    /* adjust the width; make sure the total of both is 100% */ 
 
    background: #ccc 
 
    padding: 0; 
 
    margin: 0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <dl id="dl1"></dl> 
 
    <dl id="dl2"></dl>