Как распечатать массив возвращенных почтальонов JSON на моем html, используя jQuery Ajax success? - PullRequest
Новая
       1

Как распечатать массив возвращенных почтальонов JSON на моем html, используя jQuery Ajax success?

0 голосов
/ 20 марта 2020

Я получу sh до l oop через мой массив JSON, возвращенный моим API [{"a":1},{"b":2},{"c":3},{"d":4}]. Как выполнить синтаксический анализ ключа и значения JSON на моем html, чтобы в выходном элементе div были указаны только ключ и значение. 

<body> 
  <div id = "result" style = "color:green" ></div>      
  <script type = "text/javascript">
      $(document).ready(function() {

          $.ajax({
              url: "http://localhost:8080/api/",
              type: 'GET',
              dataType: 'json',
              success: function(res) {
                  console.log(res);

                  //var data=$.parseJSON(res);
                  //var data = JSON.stringify(res)

                  $.each(res, function(key, value) {
                      console.log(key);
                      console.log(value);

                      var para = document.createElement("P");
                      para.innerHTML = key + ":" + value;

                      document.getElementById("result").appendChild(para);
                  })
              }
          });
      }) 
  </script> 
</body>

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Ваш JSON формат представляет собой массив, с каждым ключом является объект 

[
  {"a" : 1},
  {"b" : 2},
  {"c" : 3},
  {"d" : 4}
]

Так что это означает, что когда вы oop просматриваете элементы, key будет индексом массив, и value будет объектом 

 $.each(res, function(key, value) {
    console.log(key); // -> will be 0, 1, 2 etc
    console.log(value); // -> will be {"a" : 1}, {"b" : 2}, etc
});

Таким образом, есть 2 варианта, вы можете либо изменить свой API, чтобы он возвращал один объект с парами ключ: значение, как это 

{
    "a" : 1,
    "b" : 2,
    "c" : 3,
    "d" : 4
}

Или вам нужно добавить дополнительный l oop в свой код, чтобы вы могли l oop через объекты и отображать значения (хотя я бы рекомендовал вместо go с первым параметром 

$.ajax({
    url: "http://localhost:8080/api/",
    type: 'GET',
    dataType: 'json',
    success: function(res) {
        $.each(res, function(key, object) {
            $.each(object, function(key, value) {
                var para = document.createElement("P");
                para.innerHTML = key+ ":" +value;
                document.getElementById("result").appendChild(para);
            });
        });
    }
});
0 голосов
/ 20 марта 2020

Вы перебираете массив, функция принимает аргументы как item и index: 

$.each(array, function(index,item){});

Создайте вторичный l oop и выполните итерации по объектам: 

$.each(object, function(key,value){});


res = [{
    "a": 1
}, {
    "b": 2
}, {
    "c": 3
}, {
    "d": 4
}]
$.each(res, function(index,item) {
$.each(item, function(key,value){
    var para = document.createElement("P");
    para.innerHTML = key + ":" + value;
    document.body.appendChild(para);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...