Angular and Google Sheets JSON


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.

The JSON Feed

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>

Comments on this post

  1. Francis Kim said on October 7, 2015 at 8:39 am

    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.

    • Tom Woodward said on October 7, 2015 at 12:09 pm

      Appreciate that Francis. Gives me some language to search with 🙂

Leave a Reply

Trackbacks and Pingbacks on this post

  1. Embed Collector Tool | Bionic Teaching said on October 8, 2015 at 8:50 pm

    […] This pretty much a mashup of two recent projects – the personalized fridge poetry and the Angular/Google Sheets JSON stuff. […]

TrackBack URL