Question

我正在尝试从代理服务中使用数据源，并且数据源具有以下结构：

{
  "Items": {
    "ItemSection": [
      {
        "Food": {
          "Name": "Potato Chips",
          "itemID": "24501"
        },
        "category": "Snack",
        "description": "Some description",
        "available": "Shop A"
      },
      {
        "Food": {
          "Name": "Cookie",
          "itemID": "24510"
        },
        "category": "Snack",
        "description": "Some description in here.",
        "available": [
          "Shop A",
          "Shop B"
        ]
  },

以下是回复标题：

Status Code: 200 OK
Access-Control-Request-Method: OPTIONS, GET
Cache-Control: public, max-age=321
Content-Length: 42158
Content-Type: application/json
Date: Thu, 29 Sep 2016 20:45:49 GMT
Expires: Thu, 29 Sep 2016 20:51:11 GMT
Last-Modified: Thu, 29 Sep 2016 20:31:11 GMT
Server: Microsoft-IIS/8.5
Vary: *
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
access-control-allow-credentials: true
access-control-allow-headers: Authorization, Content-Type
access-control-allow-origin

这就是我使用JavaScript消费数据源的方式：

function getItems() {
    var uri = "proxy url goes here";  
    var xhr = new XMLHttpRequest();
    xhr.open("GET", uri, true);
    xhr.onload = function () {
        var resp = JSON.parse(xhr.responseText);
        showItems(resp.value);
    }
    xhr.send(null);
}

function showItems(item) {
    var tableContent = "<tr class='ItemTitle'><td>Item Lists</td></tr>\n";
    for (var i = 0; i < item.length; ++i) {
        var record = item[i];   
        tableContent += "<tr><td>" + record.Name + "</td></tr>\n";
    }
    document.getElementById("showItem").innerHTML = tableContent;
}

我运行页面时数据源没有显示，我得到的只是一个空白页面，只显示标题Items。但是，如果我将xhr.onload = function() {}中的代码替换为：

var version_d = document.getElementById("ItemLists");
version_d.innerHTML = xhr.responseText;

然后所有数据源都将显示在页面上，但它只显示原始数据源，我无法使用showItems功能选择我想在页面上显示的内容。

这是我的html页面：

<!DOCTYPE html>
<html>
    <head>
        <title>List</title>
        <link rel="stylesheet" type="text/css" href="ShowOrders.css" />
        <script src="ShowOrders.js"></script>
        <script>
            window.onload = getItems;
        </script>
    </head>
    <body>
        <h1>Items</h1>
        <table id="showItem"></table>
    </body>
</html>

为什么它不能与JSON.parse一起使用？我使用跨源资源共享（CORS）方法错了吗？如何使用任何外部库或框架（仅限纯JavaScript）？

Answer 1

resp.value

JSON.parse直接返回已解析的对象，因此resp.value未定义。

你只想要

return resp;

无法从代理服务中使用JSON数据源

1 个答案: