使用Javascript从REST解析并显示JSON

时间:2017-01-05 23:33:54

标签: javascript html json ajax rest

我正在尝试使用javascript从网页上显示REST中的JSON数据 我有以下REST调用正常工作到firefox控制台

function gethosts() {
   var xhttp = new XMLHttpRequest();
   xhttp.open("GET", "https://10.10.10.10/api/machine", false);
   xhttp.setRequestHeader("Content-type", "application/json");
   xhttp.send();
   var response = JSON.parse(xhttp.responseText);
}

JSON数据如下,

{
  "offset": 0,
    "hosts": [
     {
       "id": "422022c0-4ca7-66a2-bf73-9b56a65c9d2f",
       "name": "System Z",
       "type": "ORIGINAL",
       "model": "System X",
       "version": "Release 01",
       "management_ip": "10.10.10.11",
       "state": "ALIVE",
       "date": "2017-01-05T17:55:58Z"
},

我希望使用html

显示
Name:    System Z
Model:   System X
Version: Release 01
MGMT IP: 10.10.10.11
State:   ALIVE

我尝试将此功能添加到该功能但它似乎无法正常工作

obj.hosts[0].name// return name
obj.hosts[0].model // return model
$( "body" ).append("<div>"+obj.hosts[0].name+"</div>")
$( "body" ).append("<div>"+obj.hosts[0].model+"</div>")

示例HTML代码是,

    <button type="button" onclick="gethosts()">Get all Hosts</button>   
    <div id="gethosts">Hosts: </div>

1 个答案:

答案 0 :(得分:0)

obj来自哪里? response是解析的JSON。

function gethosts() {
   var xhttp = new XMLHttpRequest();
   xhttp.open("GET", "https://10.10.10.10/api/machine", false);
   xhttp.setRequestHeader("Content-type", "application/json");
   xhttp.send();
   var response = JSON.parse(xhttp.responseText);
   $("body").append("<div>"+response.hosts[0].name+"</div>")
   $("body").append("<div>"+response.hosts[0].model+"</div>")
}

另外,为什么混合了香草JS和jQuery?如果你已经加载了jQuery,为什么不使用$.ajax