javascript - Load JSON in AngularJS App (loading google spreadsheet) - Stack Overflow

admin管理员组

文章数量:1310004

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(";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>

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./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>

• javascript
• json
• angularjs
• google-sheets

Share Improve this question Follow edited Mar 15, 2015 at 13:21 Imalea asked Mar 15, 2015 at 5:21 ImaleaImalea 37655 silver badges1414 bronze badges 1

• 4 First rotate your profile picture – underscore Commented Mar 15, 2015 at 5:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./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 plicated 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.

Here is a new working plunker. The problem was that it can't find the "yo" variable anymore.

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

本文标签： javascriptLoad JSON in AngularJS App (loading google spreadsheet)Stack Overflow