JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>
<div ng-app="myApp" ng-controller="SuperCtrl" class="row">
<select ng-model="find" ng-options="entry.category as entry.category for entry in parsedEntries | unique: 'category'">
<option value="">Select Category</option>
</select>
<p>Selected category : {{find}}</p>
<ul class="small-12 medium-12 columns">
<li ng-repeat="entry in parsedEntries | filter: find" class="pod-list"> <strong>{{ entry.title }} </strong>
<span>{{ entry.description }}</span>
</li>
</ul>
</div>
JavaScript
var app = angular.module('myApp', ['angular.filter']);
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'];
return {
category: category,
description: description,
title: title
};
}
$http.get(url)
.success(function (response) {
var entries = response['feed']['entry'];
$scope.parsedEntries = [];
debugger;
for (key in entries) {
var content = entries[key];
$scope.parsedEntries.push(parse(content));
}
});
}]);