（Handlebarsjs 模板）如何从外部 JSON 源获取数据？答案

【问题标题】：(Handlebarsjs templating) How to get data from external JSON source?（Handlebarsjs 模板）如何从外部 JSON 源获取数据？
【发布时间】：2013-10-12 04:57:29
【问题描述】：

查看此链接：http://jsfiddle.net/Rousnay/FJzre/ 它正在工作，JSON 数据来自http://json.virtuecenter.com/json-data/blogs/tags?callback=?

但是当我想从http://sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/GetMenuItems?callback=?获取数据时它不起作用

谁能帮我举个jsfiddle 的例子。请。

【问题讨论】：

了解如何使用浏览器的开发者工具。在 Network 面板中，您可以检查这些 Ajax 请求的 HTTP 响应。您的第二个 URL 不会返回与第一个 URL 具有相同结构的 JSON。
我知道JSON源不一样，可以从sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/…获取JSON数据吗？对于<script id="movies-tmp" type="text/x-template"> <a href="{{url}}">{{text}}</a> <br> </script> 喜欢这个jsfiddle.net/Rousnay/FJzre
您的模板需要一个“blogsTags”数组，但从第二个 URL 返回的 JSON 不提供这样的数组。你不明白什么？如果您希望模板使用特定的 JSON 结构，则必须基于该结构构建模板。像这样：jsfiddle.net/simevidas/FJzre/2
非常感谢，您给了我完美的解决方案.... :)

标签： javascript jquery json jsonp handlebars.js

【解决方案1】：

从“http://sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/GetMenuItems?callback=?”获取时返回的数据对模板无效你最终得到：

[
    {
        "text": "Home ",
        "url": "/Default.aspx" 
    },
    {
        "text": "Events ",
        "url": "/Event-List/"
    },
    {
        "text": "Test",
        "url": "/Pages/8276/Test/"
    }
]

当来自“http://json.virtuecenter.com/json-data/blogs/tags?callback=?”你有：

{
    "blogsTags": [
                     {
                         "tag":"GovernorBentley",
                         "count":1,
                         "separation_path":"\/blogs\/byTag\/GovernorBentley.html"
                     },
                     {
                         "tag":"Huntsville",
                         "count":1,
                         "separation_path":"\/blogs\/byTag\/Huntsville.html"
                     },
                     {
                         "tag":"Voting Responsibility",
                         "count":1,
                         "separation_path":"\/blogs\/byTag\/Voting Responsibility.html"
                     },
                     {
                         "tag":"Voting Rights",
                         "count":1,
                         "separation_path":"\/blogs\/byTag\/Voting Rights.html"
                     }
                 ],
                 "pagination": {
                     "limit":20,
                     "total":4,
                     "page":1,
                     "pageCount":1
                 }
}

您的模板需要一个“blogsTags”属性。

【讨论】：

我知道JSON源不一样，可以从sunday-theater-club.simpletix.eu/API/ThemeUIHandler.asmx/…获取JSON数据吗？对于<script id="movies-tmp" type="text/x-template"> <a href="{{url}}">{{text}}</a> <br> </script> 喜欢这个jsfiddle.net/Rousnay/FJzre