格式化并显示从jQuery返回的数据?

时间:2014-05-27 01:10:36

标签: javascript jquery html import.io

我正在使用import.io来集成和显示我正在抓取的一系列页面。我使用JS而且我认为是jQuery。

代码如下:https://import.io/data/integrate/#js

<!DOCTYPE html>
<html>
<head>
    <title>Import&bull;io Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- 1. Include the client library -->
    <script src="https://cdn.import.io/js/2.0.0/importio.js"></script>
    <!-- 2. Configure the library -->
    <script type="text/javascript">
        importio.init({
            "auth": {
                "userGuid": "ee034881-d641-48e9-935d-b79819ceb83c",
                "apiKey": "YOUR_API_KEY"
            },
            "host": "import.io"
        });

        // Data and done callbacks
        var dataCallback = function(data) {
            console.log("Data received", data);
            for (var i = 0; i < data.length; i++) {
                var d = data[i];        for (var k in d.data) {
                    document.write("<i>" + k + "</i>: " + d.data[k] + "<br />");        }       > document.write("<hr>");     }
                }
                var doneCallback = function(data) {
                    console.log("Done, all data:", data);
                    document.write("<b>Done</b><hr>");
                }

    // 3. Do the query (when the function is called)
    var doQuery = function() {
          // Query for tile ladbrokes promos
          importio.query({
            "connectorGuids": [
            "f6833c85-4a92-47b1-9b96-4c287eac5d24"
            ],
            "input": {
                "webpage/url": "https://www.ladbrokes.com.au/promotions/"
            }
          }, { "data": dataCallback, "done": doneCallback });
        }
    </script>
</head>
<body>
    <button onclick="doQuery()">Query</button>
</body>
</html>

然而,该代码的结果是一个按钮,它将我带到一个新页面并给我一个原始的数据转储。我如何解析数据(它看起来像JSON?)并在页面上很好地格式化?例如表格或分层列表?

返回的数据遵循以下格式:

   {
    "link/_title": "National Olympic Committee of the Azerbaijani Republic",
    "updated/_utc": "Tue Feb 26 13:38:00 GMT 2013",
    "title": [
        "National Olympic Committee of the Azerbaijani Republic",
        "Azerbaijani"
    ],
    "updated/_source": "13:38, 26 February 2013",
    "updated": 1361885880000,
    "link": "http://en.wikipedia.org/wiki/National_Olympic_Committee_of_the_Azerbaijani_Republic",
    "link/_source": "/wiki/National_Olympic_Committee_of_the_Azerbaijani_Republic",
    "link/_text": "National Olympic Committee of the Azerbaijani Republic"
}

我尝试过搜索,但我认为我没有使用正确的行话,因此无法找到正确的结果。

干杯!

1 个答案:

答案 0 :(得分:3)

您可以对返回的JSON字符串使用 JSON.parse()。你需要jQuery来实现这一点。

工作演示 - http://codepen.io/nitishdhar/pen/jdveD

看起来像这样 -

var jsonString = '{"link/_title":"National Olympic Committee of the Azerbaijani Republic","updated/_utc":"Tue Feb 26 13:38:00 GMT 2013","title":["National Olympic Committee of the Azerbaijani Republic","Azerbaijani"],"updated/_source":"13:38, 26 February 2013","updated":1361885880000,"link":"http://en.wikipedia.org/wiki/National_Olympic_Committee_of_the_Azerbaijani_Republic","link/_source":"/wiki/National_Olympic_Committee_of_the_Azerbaijani_Republic","link/_text":"National Olympic Committee of the Azerbaijani Republic"}';

var jsonObject = JSON.parse(jsonString);

现在你可以解析这个对象&amp;访问捕获的所有值。像这样的东西 -

var title = jsonObject['link/_title'];