在AngularJS应用负载JSON（装载谷歌小号preadsheet） [英] Load JSON in AngularJS App (loading google spreadsheet)

问题描述

我试图加载一个谷歌小号preadsheet在我的应用程序，但我没有管理，使其工作。我试图（通过控制器和/或通过HTML）访问树结构的方式不同，但他们没有工作。
任何想法可能是错误的？

下面是我的控制器：

  app.controller（'SuperCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
    $http.get(\"https://s$p$padsheets.google.com/feeds/list/1lZWwacSVxTD_ciOsuNsrzeMTNAl0Dj8SOrbaMqPKM7U/od6/public/values?alt=json-in-script&callback=x\")
    .success（功能（响应）{
      $ scope.items =响应;
    }）;
}]）;
 

这里是HTML：

 ＆LT; UL NG控制器=SuperCtrl＆GT;
  ＆LT;李NG重复=项items.feed.entry＆GT;
    {{item.title.type}}
  ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

创建工作plunkr你

<一个href=\"http://plnkr.co/edit/JfXrVDWacvjF2RzxP18g?p=$p$pview\">http://plnkr.co/edit/JfXrVDWacvjF2RzxP18g?p=$p$pview

但这里也是解决方案的肉：

  app.controller（'SuperCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{
    VAR URL = 'https://s$p$padsheets.google.com/feeds/list/1lZWwacSVxTD_ciOsuNsrzeMTNAl0Dj8SOrbaMqPKM7U/od6/public/values?alt=json'
    VAR解析=功能（输入）{
      VAR类=条目['GSX $类别'] ['$ T'];
      Var描述=条目['GSX $说明'] ['$ T'];
      VAR标题=条目['GSX $标题'] ['$ T'];
      VAR URL =条目['GSX $ URL'] ['$ T'];
      VAR哟=条目['GSX $哟'] ['$ T'];
      返回{
        类别：类别，
        说明：说明，
        标题：标题，
        网址：网址，
        哟：哟
      };
    }
    $ http.get（URL）
    .success（功能（响应）{
      VAR项=响应['饲料'] ['入口'];
      $ scope.parsedEntries = [];
      为（以条目键）{
        VAR内容=条目[关键]
        $ scope.parsedEntries.push（解析（内容））;
      }
    }）;
}]）;
 

第一个问题你正在使用的脚本JSON'，这是复杂的API的版本，而不是你想要的。改变了API结果仅仅是JSON。

第二个问题是分析的结果，看到我的功能有没有混乱的谷歌小号preadsheet项转换成漂亮的可读JSON。

这个例子的工作 - 有个补锅匠。我的建议是找到一个比谷歌小号preadsheets来存储你的数据以外的东西。

这很有趣，我实际上是建立在谷歌小号preadsheets之上的应用程序太（trackerkeeper.co），这就是为什么我可以帮你。不是超得意的工程，但它是一种乐趣：

祝你好运。

I am trying to load up a Google spreadsheet in my application, but I am not managing to make it work. I've tried different ways of accessing the tree structure (via the controller and/or via the html), but none of them worked. Any idea what may be wrong?

Here is my controller:

app.controller('SuperCtrl', ['$scope', '$http', function($scope,$http) {
    $http.get("https://spreadsheets.google.com/feeds/list/1lZWwacSVxTD_ciOsuNsrzeMTNAl0Dj8SOrbaMqPKM7U/od6/public/values?alt=json-in-script&callback=x")
    .success(function(response) {
      $scope.items = response;
    });
}]);

And here is the HTML:

<ul ng-controller="SuperCtrl">
  <li ng-repeat="item in items.feed.entry">
    {{ item.title.type }}
  </li>
</ul>

解决方案

created a working plunkr for you

http://plnkr.co/edit/JfXrVDWacvjF2RzxP18g?p=preview

But here's also the meat of the solution:

app.controller('SuperCtrl', ['$scope', '$http', function($scope,$http) {
    var url = 'https://spreadsheets.google.com/feeds/list/1lZWwacSVxTD_ciOsuNsrzeMTNAl0Dj8SOrbaMqPKM7U/od6/public/values?alt=json'
    var parse = function(entry) {
      var category = entry['gsx$category']['$t'];
      var description = entry['gsx$description']['$t'];
      var title = entry['gsx$title']['$t'];
      var url = entry['gsx$url']['$t'];
      var yo = entry['gsx$yo']['$t'];
      return {
        category: category,
        description: description,
        title: title,
        url: url,
        yo: yo
      };
    }
    $http.get(url)
    .success(function(response) {
      var entries = response['feed']['entry'];
      $scope.parsedEntries = [];
      for (key in entries) {
        var content = entries[key];
        $scope.parsedEntries.push(parse(content));
      }
    });
}]);

First problem you were using the 'json in script' version of the API which is complicated and not what you want. Changed the API result to just be JSON.

Second problem is parsing the result, see my function there that converts the confusing google spreadsheet entries into nice readable JSON.

The example works - have a tinker. My advice is find something other than google spreadsheets to store your data.

It's funny, I actually built an app on top of google spreadsheets too (trackerkeeper.co), which is why I could help you. Not super proud of the engineering but it was kind of fun:

Good luck.

这篇关于在AngularJS应用负载JSON（装载谷歌小号preadsheet）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！