108 Ionic Gets Data From Google Sheets

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:

https://spreadsheets.google.com/feeds/worksheets/1rfhJmGhsBpi7OZyhnr8mOibxoIq0uID_wKuhxwJJgOw/public/basic?alt=json

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


<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

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

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:

http://codepen.io/notarazi/pen/bgQwZM

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


<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

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

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)

});

http://codepen.io/notarazi/pen/NdZWwy

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:

See the Pen 108 Ionic Gets Data From Google Sheets 1 by notarazi (@notarazi) on CodePen.

visit link download

Online Solutions

Thursday, April 26, 2018

108 Ionic Gets Data From Google Sheets

108 Ionic Gets Data From Google Sheets

1) Start with startup codes.

2) Add demo codes.

No comments:

Post a Comment