如何使用JavaScript将JSON API提要显示到HTML页面中

Question

我想使用JQuery将以下Feed中的最新结果显示到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>

Answer 1

您需要获取第一个Object键，并且您需要使用["..."]作为元数据，因为它有一个空格：

＆＃13;

＆＃13;

$.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));
    }
  });
});

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;