时间戳

首页 > 解决方案 > 创造动态

来自 JSON

javascript - 创造动态
来自 JSON

问题描述

我试图弄清楚如何从我从服务器获得的 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"

实际的 HTML 和 numbered 我正在尝试将数据输入

任何想法我应该如何解决这个问题？

编辑：

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

这是我的 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>

标签： javascriptjsongridview

解决方案

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

    }

推荐阅读