flickr photo shared by Kecko under a Creative Commons ( BY-ND ) license
Man.
This was a slog and really highlighted gross inadequacies in my conceptual understanding of pretty much everything.
That being said, with an end-around, it works.
The whole thing is below but there were really two pieces where I got stuck and flailed away on Stackoverflow and other places for quite some time.
Getting the JSON
app.controller('SuperCtrl', function($scope, $http) {
$http.get("https://spreadsheets.google.com/feeds/list/1XBiQ_SOek3jMLZJOrp5whb5nPSmMuuzV4uu-8FTP6h4/1/public/values?alt=json")
.success(function(response) {$scope.tools = response.feed.entry;});
});
I always struggle with nested data and getting things right. It seems so stupid simple now . . . response.feed.entry but I’m often unclear when it’s periods, when it’s =>, or when it’s something entirely different. You mix that with a few levels of confusion around the process and you end up with many variables you can screw up. For instance, if I remember correctly response[‘feed’][‘entry’] also works.
Searching all of the JSON
<input ng-model='search.content.$t' type="text" placeholder="Filter by" autofocus>
I’m cheating here. I couldn’t get the scope of the filter to be all of the data returned in the JSON. It kept stopping at the first element- id.
So I cheated.
I wrote a formula on the spreadsheet to mash all the cells together per row and pointed the filter at that data.
Ugly. But functional.
I don’t know what it’ll end up being. Not what it is but now that the framework is built, we can use Google Sheets/Forms as a database/interface for data entry and then display that data in interactive ways shaped by Angular. That opens up some big doors.
Edit
As I wrote that last paragraph I realized many times I am unclear. I wondered if I could whip up a quick example and I thought about all the data I have being gathered in Google Sheets from Instagram for social media/health research.
So . . . in about 5 minutes. I was able to build something to search a large amount of Instagram data by like count. Not valuable but representative that the framework is now something that can be thrown at all kinds of things.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tools and Tips for 1:1</title>
<meta name="generator" content="BBEdit 11.1" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.row {
margin:auto;
}
</style>
</head>
<body ng-app="myApp" ng-controller="SuperCtrl">
<div class="container-fluid">
<h3>On the computer</h3>
<div class="row">
<div class="col-md-4">
<form class="form-inline">
<input ng-model='search.content.$t' type="text" placeholder="Filter by" autofocus>
</div>
</form>
</div>
<div class="row">
<div ng-repeat="entry in tools | filter: search| orderBy:'gsx$focus.$t'" class="col-md-4">
<h4><a href="{{ entry.gsx$url.$t }}">{{ entry.gsx$title.$t }} </a></h4>
<div class="description">{{ entry.gsx$notes.$t}}</div>
{{ entry.gsx$focus.$t }}
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
//
app.controller('SuperCtrl', function($scope, $http) {
$http.get("https://spreadsheets.google.com/feeds/list/1XBiQ_SOek3jMLZJOrp5whb5nPSmMuuzV4uu-8FTP6h4/1/public/values?alt=json")
.success(function(response) {$scope.tools = response.feed.entry;});
});
//
</script>
</body>
</html>
If you filter within your controller rather than on ng-repeat, it should have done what you needed it to. But of course you’d have to change your filter scope etc. I normally combine lodash with the filter to make my life a bit easier.
Appreciate that Francis. Gives me some language to search with 🙂