All Projects → aaronksaunders → Ionic2-NutritionSample

aaronksaunders / Ionic2-NutritionSample

Licence: other
Ionic2 to show the use of http in an application - IonicFramework - angular2

Programming Languages

CSS
56736 projects
typescript
32286 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ionic2-NutritionSample

fireblogger
Ionic 2 social media microblogging platform built with firebase 3 as backend
Stars: ✭ 54 (+184.21%)
Mutual labels:  ionic-framework, ionic2
ionic3-image-handling
In this ionic tutorial you will learn how to access the image gallery and take pictures from an ionic app. Also we will show you how to add a image cropper. This ionic tutorial includes a working ionic app example you can reuse for your needs.
Stars: ✭ 35 (+84.21%)
Mutual labels:  ionic-framework, ionic2
todo-list
TodoList using Ionic2/3 & Firebase: * PWA * SSO Google plus. * Share list via QRcode. * Upload image from Camera or Storage. * Speech Recognition.
Stars: ✭ 18 (-5.26%)
Mutual labels:  ionic-framework, ionic2
ionic-workflow-guide
Create a full and powerful worflow with Ionic (Unit Testing, Environment variables, Automatic documentation, Production App Server, Automatic deployment)
Stars: ✭ 46 (+142.11%)
Mutual labels:  ionic-framework, ionic2
ionic3
This repository contains complete source code for Ionic 3 tutorial from https://ampersandacademy.com/tutorials/ionic-framework-3. I will try many Ionic 3 specific scripts and will write them as separate tutorial. You can follow this repo to get more tested and working script for the Ionic 3.
Stars: ✭ 21 (+10.53%)
Mutual labels:  ionic-framework, ionic2
ionic-3-video-calling-using-webrtc
This is demo code of how to implement video calling in ionic 3 using webrtc
Stars: ✭ 58 (+205.26%)
Mutual labels:  ionic-framework, ionic2
Ionic Img Viewer
Ionic 2+ component providing a Twitter inspired experience to visualize pictures.
Stars: ✭ 291 (+1431.58%)
Mutual labels:  ionic-framework, ionic2
ionic-hockeyapp
Need HockeyApp in your Ionic application, add this package!
Stars: ✭ 19 (+0%)
Mutual labels:  ionic-framework, ionic2
Ion Affix
A directive for Ionic framework for creating affix headers.
Stars: ✭ 58 (+205.26%)
Mutual labels:  ionic-framework, ionic2
Awesome Ionic
An "awesome" list of Ionic resources
Stars: ✭ 799 (+4105.26%)
Mutual labels:  ionic-framework, ionic2
ionic2-geofence
Ionic2 Geofencing Sample Project
Stars: ✭ 96 (+405.26%)
Mutual labels:  ionic-framework, ionic2
Wooionic3
An eCommerce App for WooCommerce stores using Ionic 3.
Stars: ✭ 208 (+994.74%)
Mutual labels:  ionic-framework, ionic2
ionicfirebaseauth
Exemplo de alguns tipos de autenticação com Ionic 2 e Firebase
Stars: ✭ 18 (-5.26%)
Mutual labels:  ionic-framework, ionic2
ionic-uber-clone
Ionic 4 Taxi Booking script
Stars: ✭ 34 (+78.95%)
Mutual labels:  ionic-framework, ionic2
ionic-video-chat-support
Ionic 3 Video and Group Text Chat
Stars: ✭ 19 (+0%)
Mutual labels:  ionic-framework, ionic2
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (+15.79%)
Mutual labels:  ionic-framework, ionic2
ionic-socialsharing-with-deeplinking-example
Ionic Social Sharing and Deep Linking example app. Complete Ionic Tutorial with free example app! Built for Ionic 3.
Stars: ✭ 16 (-15.79%)
Mutual labels:  ionic-framework, ionic2
Ionic Audio
An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
Stars: ✭ 332 (+1647.37%)
Mutual labels:  ionic-framework, ionic2
Simple Ionic 3 App
A simple Ionic 3 app with get requests to a local JSON file. It showcases how to set up a simple service and provides some nice components for your own application.
Stars: ✭ 59 (+210.53%)
Mutual labels:  ionic-framework, ionic2
Awesome Ionic2 Components
Should help you to get awesome components and plugins for Ionic2
Stars: ✭ 209 (+1000%)
Mutual labels:  ionic-framework, ionic2

Ionic2-NutritionSample

This is a sample application based on off a Ionic2 to show the use of http in an application.

YouTube Channel

--

Check out the videos and leave suggestions for new ones and subscribe for updates

--

In this example, we are using https://developer.nutritionix.com/for nutrition information; showing how to access REST API using ngFor directive for rendering the data.

####Ionic Version Information

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.6
OS: macOS Sierra
Node Version: v5.0.0
Xcode version: Xcode 8.2.1 Build version 8C1002

####Function in service to query REST API

    getSearchResults(_searchString) {

        // fields to get back from API based on documenation
        let fields = 'brand_id,item_name,item_id,brand_name,nf_calories,nf_total_fat';

        // set the parameters for the http request, these will be 
        // added to the query string
        let params: URLSearchParams = new URLSearchParams();
        params.set('appId', this.APP_ID);
        params.set('appKey', this.API_KEY);
        params.set('fields', fields)

        // construct the URL, adding the search term to the url
        let url = this.BASE_URL + _searchString
        
        // execute the http get request, passing in query tring parameters
        // use the .map() to convert results to JSON to be returned to
        // the caller
        return this.http.get(url, { search: params })
            .map(res => res.json())

    }

####Use the service to get the data

    // have a string, do the search
    this._dataService.getSearchResults(q)
      .subscribe(
        // process the results..
        (data) => {
          console.log('search results', data.hits)
          this.items = data.hits
        },
        // handle an error condition...
        (err) => alert("Error Searching: " + err),
        // called when completely done processing
        () => { console.log("All Good With The Data") }
      );

##MORE IONIC2 SAMPLES HERE

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].