.
108 Ionic Gets Data From Google Sheets
This demo is based on https://gist.github.com/marcelpetersen/6f938446833a634094b2 .
The Google Sheet above provides JSON data link through the following Feed URL:
https://spreadsheets.google.com/feeds/list/1rfhJmGhsBpi7OZyhnr8mOibxoIq0uID_wKuhxwJJgOw/od6/public/values?alt=json
(the green text is the Google Sheet id that is unique for each Google Sheets)
Google provides many kinds of data links at the following URL:
|
If we copy the JSON data that we get from the Feed URL above into http://www.jsoneditoronline.org/, we get the following visual hierarchical structure.
This hierarchical structure shows us the location of Google Sheet data item. Each data item is marked by the prefix gsx$.
1) Start with startup codes.
HTML
<html>
<head> <meta charset="utf-8"> <title>Diary</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <!-- Internal Library <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> --> <!-- Cloud Library --> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <!-- Needed for Cordova/PhoneGap (will be a 404 during development) --> <script src="cordova.js"></script> </head> <body ng-app="app"> <div> <div> <ion-nav-bar class="bar-stable"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </div> </div> <script id="home.html" type="text/ng-template"> <ion-view title="Home" id="page1"> <ion-content padding="true" class="has-header"> </ion-content> </ion-view> </script> </body> </html> |
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', function ($scope) { }]) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/page1', templateUrl: 'home.html', controller: 'homeCtrl' }) $urlRouterProvider.otherwise('/page1') }); |
CODEPEN:
2) Add demo codes.
HTML
<html>
<head> <meta charset="utf-8"> <title>Diary</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <!-- Internal Library <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> --> <!-- Cloud Library --> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <!-- Needed for Cordova/PhoneGap (will be a 404 during development) --> <script src="cordova.js"></script> </head> <body ng-app="app"> <div> <div> <ion-nav-bar class="bar-stable"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> </div> </div> <script id="home.html" type="text/ng-template"> <ion-view title="Home" id="page1"> <ion-content padding="true" class="has-header"> {{contacts}} </ion-content> </ion-view> </script> </body> </html> |
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', function ($scope) {
function getData(){
var url='https://spreadsheets.google.com/feeds/list/1rfhJmGhsBpi7OZyhnr8mOibxoIq0uID_wKuhxwJJgOw/od6/public/values?alt=json';
$http.get(url)
.then(function(resp) {
console.log('Success', resp);
EntryTab = resp.data.feed.entry;
console.log('CONTACTS', EntryTab);
console.log('NOM', EntryTab[0].gsx$nom.$t);
$scope.contacts = EntryTab;
}, function(err) {
// err.status will contain the status code
console.error('ERROR', err);
})
}//getData()
getData();
}]) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/page1', templateUrl: 'home.html', controller: 'homeCtrl' }) $urlRouterProvider.otherwise('/page1') }); |
The following is the visual structure that is displayed by Chrome Developer Console.
The console output above is generated by following function:
function getData(){
var url='https://spreadsheets.google.com/feeds/list/1rfhJmGhsBpi7OZyhnr8mOibxoIq0uID_wKuhxwJJgOw/od6/public/values?alt=json';
$http.get(url)
.then(function(resp) {
console.log('Success', resp);
EntryTab = resp.data.feed.entry;
console.log('CONTACTS', EntryTab);
console.log('NOM', EntryTab[0].gsx$nom.$t)
}, function(err) {
// err.status will contain the status code
console.error('ERROR', err);
})
}//getData()
|
DEMO:
REFERENCES:
https://www.w3schools.com/angular/angular_http.asp (Read this to understand $http )
https://gist.github.com/marcelpetersen/6f938446833a634094b2 (Read this to understand Google Sheet API)
..
No comments:
Post a Comment