我已將此數據讀入控制台。 我想在我的網頁中顯示“ 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;
}