Question

我试图弄清楚如何从服务器作为响应从JSON创建容器内的新容器（以JSON中的每个消息创建卡）。问题是，我还没弄清楚该怎么做。

我得到的数据如下：

> {
>     "result": [
>         {
>             "context": "",
>             "group": "",
>             "id": "",
>             "message": "#joined Live Feed",
>             "state": "published",
>             "sys_created_by": "system",
>             "sys_created_on": "2017-02-12 18:32:53",
>             "sys_id": "024a205e830330008b410e8761c3e278"
>         },
>         {
>             "context": "",
>             "group": "",
>             "id": "",
>             "message": "Go to Tools -> Protection -> Protect Workbook",
>             "state": "published",
>             "sys_created_by": "mara.rineheart",
>             "sys_created_on": "2017-02-12 18:35:04",
>             "sys_id": "02caa45e830330008b410e8761c3e228"
>         },
>         {
>             "context": "",
>             "group": {
>                 "link": "https://dev49574.service-now.com/api/now/table/live_group_profile/cc4d3b9c834330008b410e8761c3e2e8",
>                 "value": "cc4d3b9c834330008b410e8761c3e2e8"
>             },
>             "id": "",
>             "message": "ITIL User created the group",
>             "state": "published",
>             "sys_created_by": "itil",
>             "sys_created_on": "2017-02-07 04:46:47",
>             "sys_id": "044d3b9c834330008b410e8761c3e2ea"
>         },
>         {
>             "context": "",
>             "group": {
>                 "link": "https://dev49574.service-now.com/api/now/table/live_group_profile/a58c43be838330008b410e8761c3e265",
>                 "value": "a58c43be838330008b410e8761c3e265"
>             },
>             "id": "",
>             "message": "Thanks! The problem is sporadic. AT&T is laying cable outside. Maybe related?",
>             "state": "published",
>             "sys_created_by": "taylor.fogerty",
>             "sys_created_on": "2017-02-19 00:16:08",
>             "sys_id": "10627418831330008b410e8761c3e276"
>         },
>         {
>             "context": "",
>             "group": {
>                 "link": "https://dev49574.service-now.com/api/now/table/live_group_profile/a58c43be838330008b410e8761c3e265",
>                 "value": "a58c43be838330008b410e8761c3e265"
>             },

我想对它进行排序，以便每条消息都可以包含如下信息：

名称=（创建消息的人）
日期=创建日期
信息=实际消息

“ id”：“”，

        "message": "Thanks! The problem is sporadic. AT&T is laying cable outside. Maybe related?",
        "state": "published",
        "sys_created_by": "taylor.fogerty",
        "sys_created_on": "2017-02-19 00:16:08",
        "sys_id": "10627418831330008b410e8761c3e276"

The actual HTML and numbered 's I'm trying to get data into

有什么想法我应该如何解决？

编辑：

所以我现在离我越来越近了，我希望但仍然无法理解为什么我无法在遍历它们时从数据集中捕获任何字符串。

这是我的JS和HTML ：（我删除了POSTMAN TOKEN，因此甚至在这里也无法使用：）

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;


xhr.open("GET", "https://dev49574.service-now.com/api/now/table/live_message?sysparm_limit=10");
xhr.onload = function() {
  var jsonResponse = xhr.response;
  var jsonResponse = jsonResponse.substr(10);
  JSON.stringify(jsonResponse, null, 4);
  JSON.stringify(jsonResponse, null, "\t");
  $(document).ready(function() {
    for (var i = 0; i < jsonResponse.length; i++) {
      var markup =
        '<div><ul><li>' +
        jsonResponse[i].sys_id + '</li><li>' +
        jsonResponse[i].message +
        '</li></ul></div>';
      $('#container').append(markup);
    }
  })
  console.log(jsonResponse);
};
xhr.setRequestHeader("Authorization", "Basic YWRtaW46WjlUNnFaZUIhSCpJ");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("Postman-Token", " REMOVED ");

xhr.send(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Answer 1

您需要遍历数据集并将标记附加到DOM。使用jQuery：

var results = [
  {
    "context": "",
    "group": "",
    "id": "1",
    "message": "#joined Live Feed",
    "state": "published",
    "sys_created_by": "system",
    "sys_created_on": "2017-02-12 18:32:53",
    "sys_id": "024a205e830330008b410e8761c3e278"
  },
  {
    "context": "",
    "group": "",
    "id": "1",
    "message": "#joined Live Feed",
    "state": "published",
    "sys_created_by": "system",
    "sys_created_on": "2017-02-12 18:32:53",
    "sys_id": "024a205e830330008b410e8761c3e278"
  },
  {
    "context": "",
    "group": "",
    "id": "1",
    "message": "#joined Live Feed",
    "state": "published",
    "sys_created_by": "system",
    "sys_created_on": "2017-02-12 18:32:53",
    "sys_id": "024a205e830330008b410e8761c3e278"
  }

]

$(document).ready(function() {
  for (var i = 0; i < results.length; i++) {
    var markup = 
      '<div><ul><li>' + 
      results[i].id + '</li><li>' + 
      results[i].message + 
      '</li></ul></div>';
    $('#container').append(markup);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Answer 2

使用JavaScript尝试类似的事情：

//Main div
var mainDiv = document.getElementById("MainDiv");

    for (var i = 0; i < result.length; i++){

        var messageBoxDiv = document.createElement("div");

        var NameDiv = document.createElement("div");
        var NameLbl = document.createElement("span");
        MessageLbl.innerHTML = "Name: " + result[i].sys_created_by;
        NameDiv.appendChild(NameLbl);

        var CreatedOnDiv = document.createElement("div");
        var CreatedOnLbl = document.createElement("span");
        MessageLbl.innerHTML = "Date: " + result[i].sys_created_on;
        CreatedOnDiv.appendChild(CreatedOnLbl);

        var MessageDiv = document.createElement("div");
        var MessageLbl = document.createElement("span");
        MessageLbl.innerHTML = "Info: " + result[i].message;
        MessageDiv.appendChild(MessageLbl);

        messageBoxDiv.appendChild(NameDiv);
        messageBoxDiv.appendChild(CreatedOnDiv);
        messageBoxDiv.appendChild(MessageDiv);

        mainDiv.appendChild(messageBoxDiv);

    }

从JSON创建动态<div>

2 个答案: