如何使用JavaScript将JSON API订阅源显示到HTML页面

  • Z时代
  • 2024-01-10
  • 分类：问答

我想使用JQuery将以下订阅源的最新结果显示到HTML页面中。我怎样才能做到这一点？如何使用JavaScript将JSON API订阅源显示到HTML页面

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>

回答：

您需要得到第一个对象键，你需要使用["..."]的元数据，因为它有一个空间：

$.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>

以上是 如何使用JavaScript将JSON API订阅源显示到HTML页面 的全部内容， 来源链接： utcz.com/qa/257275.html

回到顶部