форматирование JSON из URL в HTML - PullRequest
Новая
       1

форматирование JSON из URL в HTML

0 голосов
/ 26 февраля 2020

Как мне go взять JSON, который выводится из URL, и отформатировать его в html. JSON у меня выглядит так: 

prtg-version    "xxxxxxx"
treesize    0
channels    
0   
name    "Downtime"
name_raw    "Downtime"
lastvalue   ""
lastvalue_raw   ""
1   
name    "Execution Time"
name_raw    "Execution Time"
lastvalue   "19 msec"
lastvalue_raw   19
2   
name    "File count"
name_raw    "File count"
lastvalue   "431 #"
lastvalue_raw   431
3   
name    "Folder Size"
name_raw    "Folder Size"
lastvalue   "224,855,871 Byte"
lastvalue_raw   224855871
4   
name    "Newest File"
name_raw    "Newest File"
lastvalue   "1 s"
lastvalue_raw   1
5   
name    "Oldest File"
name_raw    "Oldest File"
lastvalue   "1 h 31 m"
lastvalue_raw   5476

Его обновления каждые 15 секунд. Я хочу отформатировать в html таблицу и удалить некоторую часть. Я попробовал код из w3schools, но он просто возвращает: [object Object],[object Object]

Мой код 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("https://myurl/api/table.json?blahblahblah", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

1 Ответ

0 голосов
/ 26 февраля 2020

field - это ссылка на объекты, над которыми вы зацикливаетесь. Вывод этого в DOM приведет его к строке, следовательно, вы увидите вывод [object Object].

Чтобы исправить это, вам вместо этого нужно получить доступ к свойствам объектов и построить HTML, который вы хотите вывести. Также обратите внимание, что из контекста объекта и вашего кода похоже, что вы должны зацикливаться на result.channels, а не result. Попробуйте это: 

var result = [{
  'prtg-version': "xxxxxxx",
  treesize: 0,
  channels: [{
    name: "Downtime",
    name_raw: "Downtime",
    lastvalue: "",
    lastvalue_raw: ""
  }, {
    name: "Execution Time",
    name_raw: "Execution Time",
    lastvalue: "19 msec",
    lastvalue_raw: 19
  }, {
    name: "File count",
    name_raw: "File count",
    lastvalue: "431 #",
    lastvalue_raw: 431
  }
  // more data...
  ]
}]

jQuery(function($) {
  $("button").click(function() {
    // AJAX code removed from this demo, as it obviously cannot work
    // $.getJSON("https://myurl/api/table.json?blahblahblah", function(result){        
      $.each(result[0].channels, function(i, field) {
        $("div").append(`<p>${field.name}</p>`);
      });     
    // })
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button>Get JSON data</button>
<div></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...