创造动态 's from JSON

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);

    }