Как убрать массив в массив?Данные AJAX для JSON

Question

У меня есть данные JSON по api, как указано ниже. ВЫХОД:

[[{"first":1}],[{"last":0}],[{"other":4}]]

Мой код Ajax:

setInterval(function() {
  $.getJSON('/ytl/public/api/first-hour-trades', function(data) {
    $.each(data, function(firstHourTrades, element) {
      $("#msg1").append($('<div>', {
        text: element.first
      }));
      $("#msg2").append($('<div>', {
        text: element.last
      }));
      $("#msg3").append($('<div>', {
        text: element.other
      }));

    });
  });
}, 10000);

<div class="row">
  <div class="col-6 col-sm-4">
    <p id='msg1'> first hour trades</p>
  </div>
  <div class="col-6 col-sm-4">
    <p id='msg2'> last hour trades</p>
  </div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block">
    <p id='msg3'> other hours trade</p>
  </div>


</div>

Вывод ajax - ничто. Я думаю, что проблема в том, что мой результат JSON, но что делать и как ее решить?

МОЙ КОД:

$data = [$first_hour,$last_hour,$other_hours];

    return response()->json($data );

Answer 1

Используйте это:

JSON.parse(data)

var jsonResult = JSON.parse('[[{"first":1}],[{"last":0}],[{"other":4}]]');

setInterval(function() {
  
    $.each(jsonResult, function(firstHourTrades, element) {
      $("#msg1").append($('<div>', {
        text: element[0].first
      }));  
      $("#msg2").append($('<div>', {
        text: element[0].last
      }));      
      /*
      $("#msg2").append($('<div>', {
        text: element.last
      }));
      */
    });
  
}, 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-6 col-sm-4">
    <p id='msg1'> first hour trades</p>
  </div>
  <div class="col-6 col-sm-4">
    <p id='msg2'> last hour trades</p>
  </div>
</div>