El siguiente código da un error y muestra solo un valor.

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

El código que he proporcionado muestra el primer valor en el div document.getElementById("recenttrades0").innerHTML = " Price: " + data.trades['0'].price + " Size: " + data.trades['0'].size;

Pero, solo muestra un valor en el DIV. Estoy tratando de mostrar el precio y el tamaño del pedido, pero encuentro un error. ¡Gracias por tu ayuda!

0
Alex Jean 14 feb. 2018 a las 08:00

2 respuestas

La mejor respuesta

Muestra un valor en un div porque en su código los div están anidados, por lo que cuando configura .innerHTML de recenttrades0 está eliminando todos los demás divs.

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

No es necesario codificar todos estos y generarlos dinámicamente.

$.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>
0
void 14 feb. 2018 a las 05:23

Prueba el siguiente código:

 <!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>
0
Braj Ankit 14 feb. 2018 a las 05:40