在 AngularJS 应用程序中加载 JSON（正在加载 google 电子表格）

Question

我正在尝试在我的应用程序中加载一个 Google 电子表格，但我无法让它工作。我尝试了访问树结构的不同方法（通过控制器 and/or 通过 html），但是其中 none 有效。知道可能出什么问题了吗？

这是我的控制器：

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;
    });
}]);

这里是 HTML:

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

Answer 1

为您创建了一个工作插件

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

但这也是解决方案的核心：

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));
      }
    });
}]);

第一个问题，您使用的 API 的 'json in script' 版本很复杂，不是您想要的。将 API 结果更改为 JSON.

第二个问题是解析结果，请参阅我的函数，它将令人困惑的 google 电子表格条目转换为易于阅读的 JSON.

该示例有效 - 有一个修补匠。我的建议是找到 google 电子表格以外的东西来存储您的数据。

有趣的是，我实际上也在 google 电子表格 (trackerkeeper.co) 上构建了一个应用程序，这就是我可以帮助您的原因。对工程并不感到非常自豪，但它很有趣：

祝你好运。

Answer 2

这是一个新的工作 plunker。问题是它找不到 "yo" 变量了。

var parse = function(entry) {
  console.log(entry);
  var category = entry['gsx$category']['$t'];
  var description = entry['gsx$description']['$t'];
  var title = entry['gsx$title']['$t'];
  return {
    category: category,
    description: description,
    title: title,
    url: url
  };
}

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

在 AngularJS 应用程序中加载 JSON（正在加载 google 电子表格）

Load JSON in AngularJS App (loading google spreadsheet)

javascript

json

google-sheets

angularjs