Создание динамических <div>из 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"

Фактический HTML и нумерованный, который я пытаюсьчтобы получить данные в

Есть какие-нибудь идеи, как мне решить эту проблему?

РЕДАКТИРОВАТЬ:

Итак, я все ближе, надеюсь, но все еще не могу понять, почемуЯ не могу поймать какие-либо строки из набора данных во время их циклического прохождения.

Вот мои 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

Попробуйте что-то вроде этого, используя 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);

    }

Answer 2

Вам нужно перебрать ваш набор данных и добавить разметку в 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>