javascript - 我将此数据读入我的控制台。我想在我的网页中显示 "exampleHeader"和 "exampleBody"。我该怎么做呢？

Question

我正在将数据拉入我的控制台。我现在想在我的网站上显示数据，但不知道如何开始。如何在我的网站中显示“exampleHeader”和“exampleBody”？

这就是我将数据加载到控制台的方式

<script>
    var request = new XMLHttpRequest();

    request.open('GET', 'https://cdn.contentful.com/spaces/clc9cijcjmcd/entries?access_token=9802c47cdeb2e40562f5a4a05dd75f53088b7552b498c176ec9126ceb30d0f2c', true);  
    request.onreadystatechange = function () {

        if (this.readyState === 4) {
            console.log('Status:', this.status);
            console.log('Headers:', this.getAllResponseHeaders());
            console.log('Body:', this.responseText);        
        }
    };
    request.send();
</script>

我正在尝试将其加载到带有 id=demo 的 div 中

Body: {
  "sys": {
    "type": "Array"
  },
  "total": 1,
  "skip": 0,
  "limit": 100,
  "items": [
    {
      "sys": {
        "space": {
          "sys": {
            "type": "Link",
            "linkType": "Space",
            "id": "clc9cijcjmcd"
          }
        },
        "type": "Entry",
        "contentType": {
          "sys": {
            "type": "Link",
            "linkType": "ContentType",
            "id": "68UcXjdLs4ueKuaCwSCiqI"
          }
        },
        "id": "4Jy6Vc0R9u4CcoWEECASKO",
        "revision": 2,
        "createdAt": "2015-07-06T16:24:36.055Z",
        "updatedAt": "2015-07-07T18:04:38.570Z",
        "locale": "en-US"
      },
      "fields": {
        "exampleHeader": "Header For Example",
        "exampleBody": "I really wish i could copy and paste into her but it wont let me for some reason . \n1. List One\n2. List Two\n",
        "photo": {
          "sys": {
            "type": "Link",
            "linkType": "Asset",
            "id": "5SWcsSwJbOmQcyC8gCKkeo"
          }
        }
      }
    }
  ]
}
"includes": {
    "Asset": [
      {
        "sys": {
          "space": {
            "sys": {
              "type": "Link",
              "linkType": "Space",
              "id": "clc9cijcjmcd"
            }
          },
          "type": "Asset",
          "id": "5SWcsSwJbOmQcyC8gCKkeo",
          "revision": 1,
          "createdAt": "2015-07-06T16:24:21.141Z",
          "updatedAt": "2015-07-06T16:24:21.141Z",
          "locale": "en-US"
        },
        "fields": {
          "title": "Man on The Moon",
          "description": "Album Cover",
          "file": {
            "fileName": "cdMoon.jpg",
            "contentType": "image/jpeg",
            "details": {
              "image": {
                "width": 755,
                "height": 746
              },
              "size": 145782
            },
            "url": "//images.contentful.com/clc9cijcjmcd/5SWcsSwJbOmQcyC8gCKkeo/c6dd2a4ebdbfdd45350969b0eed82f39/cdMoon.jpg"
          }
        }
      }
    ]
  }
}

Answer 1

您需要将返回的 JSON 字符串解析为 JavaScript 对象，如下所示。然后，该对象被传递到一个函数中，该函数将抓取标题文本并将其插入到页面上的元素中。

var request = new XMLHttpRequest();

request.open('GET', '<url>', true);  
request.onreadystatechange = function () {
  if (this.readyState === 4) {    
    insertInDiv( JSON.parse(this.responseText) );
  }
};  
request.send();

function insertInDiv(data) {
  // Grabbing header text
  var bodyText = data.items[0].fields.exampleHeader;
  // Example of inserting text into first div on page
  document.getElementById('demo').innerHTML = bodyText;
}