Question

以下代码给出错误并仅显示一个值。

<h4>Recent Trades</h4>

    <div id="recenttrades0">
    <div id="recenttrades1">
    <div id="recenttrades2">
    <div id="recenttrades3">
    <div id="recenttrades4">
    <div id="recenttrades5">
    <div id="recenttrades6">
    <div id="recenttrades7">
    <div id="recenttrades8">
    <div id="recenttrades9">
    <div id="recenttrades10">
    <div id="recenttrades11">
    <div id="recenttrades12">
    <div id="recenttrades13">
    <div id="recenttrades14">
    <div id="recenttrades15">
    <div id="recenttrades16">
    <div id="recenttrades17">
    <div id="recenttrades18">
    <div id="recenttrades19">
    <script type="text/javascript">
    setInterval(function(){
    $.ajax({
    url: 'https://api.iextrading.com/1.0/stock/MSFT/book',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data){
      document.getElementById("recenttrades0").innerHTML = " Price: " + data.trades['0'].price + " Size: " + data.trades['0'].size;
      document.getElementById("recenttrades1").innerHTML = " Price: " + data.trades['1'].price + " Size: " + data.trades['1'].size;
      document.getElementById("recenttrades2").innerHTML = " Price: " + data.trades['2'].price + " Size: " + data.trades['2'].size;
      document.getElementById("recenttrades3").innerHTML = " Price: " + data.trades['3'].price + " Size: " + data.trades['3'].size;
      document.getElementById("recenttrades4").innerHTML = " Price: " + data.trades['4'].price + " Size: " + data.trades['4'].size;
      document.getElementById("recenttrades5").innerHTML = " Price: " + data.trades['5'].price + " Size: " + data.trades['5'].size;
      document.getElementById("recenttrades6").innerHTML = " Price: " + data.trades['6'].price + " Size: " + data.trades['6'].size;
      document.getElementById("recenttrades7").innerHTML = " Price: " + data.trades['7'].price + " Size: " + data.trades['7'].size;
      document.getElementById("recenttrades8").innerHTML = " Price: " + data.trades['8'].price + " Size: " + data.trades['8'].size;
      document.getElementById("recenttrades9").innerHTML = " Price: " + data.trades['9'].price + " Size: " + data.trades['9'].size;
      document.getElementById("recenttrades10").innerHTML = " Price: " + data.trades['10'].price + " Size: " + data.trades['10'].size;
      document.getElementById("recenttrades11").innerHTML = " Price: " + data.trades['11'].price + " Size: " + data.trades['11'].size;
      document.getElementById("recenttrades12").innerHTML = " Price: " + data.trades['12'].price + " Size: " + data.trades['12'].size;
      document.getElementById("recenttrades13").innerHTML = " Price: " + data.trades['13'].price + " Size: " + data.trades['13'].size;
      document.getElementById("recenttrades14").innerHTML = " Price: " + data.trades['14'].price + " Size: " + data.trades['14'].size;
      document.getElementById("recenttrades15").innerHTML = " Price: " + data.trades['15'].price + " Size: " + data.trades['15'].size;
      document.getElementById("recenttrades16").innerHTML = " Price: " + data.trades['16'].price + " Size: " + data.trades['16'].size;
      document.getElementById("recenttrades17").innerHTML = " Price: " + data.trades['17'].price + " Size: " + data.trades['17'].size;
      document.getElementById("recenttrades18").innerHTML = " Price: " + data.trades['18'].price + " Size: " + data.trades['18'].size;
      document.getElementById("recenttrades19").innerHTML = " Price: " + data.trades['19'].price + " Size: " + data.trades['19'].size;

    }
    });
}, 10000);

</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

我提供的代码显示了div document.getElementById("recenttrades0").innerHTML = " Price: " + data.trades['0'].price + " Size: " + data.trades['0'].size;

中的第一个值

但是，只在DIV中显示一个值。我试图显示价格和订单大小，但我遇到了错误。谢谢您的帮助！

Answer 1

它在div中显示一个值，因为在您的代码中div是嵌套的，因此当您设置.innerHTML recenttrades0时，它会移除所有其他div

<!-- Nested divs -->
<div>
   <div>
   </div>
</div>

您无需对所有这些进行硬编码并动态生成它们。

$.ajax({
  url: 'https://api.iextrading.com/1.0/stock/MSFT/book',
  dataType: 'json',
  type: 'get',
  cache: false,
  success: function(data) {
    var _html = "";
    data.trades.forEach(function(el){
       // Build div dynamically here
       _html += "<div> Price: " + el.price + " Size: " + el.size+"</div>";
    });
    // Append all the HTML to #main_container
    $("#main_container").html(_html);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Recent Trades</h4>
<div id="main_container">Loading...</div>

Answer 2

尝试以下代码：

 <!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
             $.ajax({
                url: 'https://api.iextrading.com/1.0/stock/MSFT/book',
                dataType: 'json',
                type: 'get',
                cache: false,
                success: function(data){
                    console.log(data.trades);
                    data.trades.forEach(function(val)
                    {
                        console.log(val);
                        $('#row').append('<div class="row"><div class="col-sm-3">'+val.price+'</div><div class="col-sm-3">'+val.size+'</div></div>');
                    })
                }
            });
        });
    </script>
</head>
<body>
<h4>Recent Trades</h4>
    <div id="row">

    </div>
</body>
</html>

无法设置属性＆inner;内部HTML＆＃39; null Json数据

2 个答案: