Retrieving Data with HTTP - Ionic 3, Angular 4 and RxJS

[@fyvewytches]

This is one of the best tutorials I've seen on YT. Clear, precise and to the point. Thank you !!

[@christinaphillips6190]

So far the best resource for learning the Ionic 3 framework besides the docs themselves. Thanks so much for all this Paul.

[@paulhalliday]

Thank you for such positive feedback Christina!

[@loukas371]

God bless your soul, this is the best tutorial of this that I have seen around. You explained everything instead of just typing code. Now I am finally not just blindly copying commands...

[@thembeladaphula4835]

Great tutorial. I'd like to do CRUD functionality using Firestore. I'd like to do all of this inside the server

[@TheBenFlock]

Yet another wildly useful tutorial! The way you make these things flow is seriously unparalleled. They shouldn't be free! Quick question: I noticed at 9:20 you used ngFor on your ion-list element instead of your ion-item element. Is iterating over lists to create several lists preferable to iterating over the item creating one list of several items?

[@paulhalliday]

Hi Patrick, Thanks once again, you're too kind. With regards to the *ngFor, you're right! I can't believe I missed that, haha. I'm glad you pointed that out because yes, it is currently really bad for performance if we had a large list. I've added an annotation regarding this. Paul

[@TheBenFlock]

Well glad I could help! Feel like I owe you. Honestly I'm very new to all this so I hadn't ruled out that using ngFor on the list might have been better. Thanks for clearing it up.

[@paulhalliday]

That's the glory of it all! You never stop learning. :)

[@shahariarkabirbhuiyan3108]

Great video! Should we use providers when using cordova plugins? Most of your previous videoes use plugins directly in the page/controller component. I was just wondering if it's a good idea to use plugins in providers

[@paulhalliday]

Hi Shahariar, Yup. You should abstract the functionality of the Cordova plugins to a provider in 99% of cases. I just put them in the component as they're intended to be viewed as an introduction to the plugin, and leave the integration down to the viewer and their app. :)

[@CharlesSkariah]

Awesome tutorial. In between which IDE are you using?

[@paulhalliday]

Charles Skariah VS Code. :)

[@ahmedakermi]

Please Firebase with ionic 3 {{save data retrive data add image}}

[@stefanzivic1636]

Great explanation ! Just keep going this way.

[@abdelilahamanzou4698]

hi thanks for doing this . please do you have a video about realtime applications with angular and Rxjs. somthing like a home page that refresh automatically

[@watsoncyrusanikwai3888]

Nice Vid mahn. Can you do a tutorial on fetching data from the WordPress API?

[@ideasolutionbz]

thanks for sharing Paul. any way how to keep checking for changes in the api? like example every 10 seconds.

[@paulhalliday]

I'd look at creating a Websocket for this. Pairs well with Observables and RxJS

[@paulhalliday]

I have a video on this actually: kzbin.info/www/bejne/pJW1foeaj7d0aqs

[@ideasolutionbz]

@@paulhalliday wow great. thank you. as always your your videos are very good and help many people. this is a bit off topic but i know you can help me. i am trying to hide notification icon based on an if else condition. not sure how to write the function if notifications.length = 1 or more than 1 notificationReceived: boolean = false; notifications: any[]; totalNotifications: number; if (notifications.length === 0) { this.notificationReceived = false; } else { this.notificationReceived = true; }

[@taowang2823]

hi Paul，would u give some example about post

[@aditiarahman435]

hello can you add sample adding custom http header on request call, thanks

[@paulhalliday]

Good point. I'll add that to my list! :)

[@clenton8454]

Hi Mr.Paul, Your videos are very helpful to learn Ionic. Am working on an application which will retrieve data from remote Oracle server through API on a button click and insert it to SQLITE DB. It takes 8 Minutes to retrieve 3000 records. Is there anything available to solve this issue.

[@mahmoudnabeel9625]

Is there any way to add a search button that retrieves results from JSON or API link. For instance, is it possible to create an app that search and retrieve google images for the string written in the search bar?

[@TheMarionatera]

Hi guys, i have a question, the data can not update in real time every time i'd to close the app and open again. should i use an interval like subscribe().interval() ? regards..

[@jorgeutrilla9892]

Hello Paul, congrats on the video it really helps, rxjs is kind of confusing for me. I have a little question... shouldn´t 'throw' be imported? I did not see that on the video (import 'rxjs/add/observable/throw';)

[@paulhalliday]

Hi Jorge, This is true! I think I must have accidentally cut it off the video! :< Paul

[@hasansyed8728]

Paul, i want to reterive JSON data from server and display as marquee in screen. as suggestions how to do that?

[@faifar]

what theme/text-font are you using for code editor?

[@RaviSojitraJarvis]

Awesome explanation.. :) :D Thanks for sharing.

[@paulhalliday]

Thanks Ravi! I'm glad you liked it. :)

[@thelastcodebender3661]

how do you fix CORS error?

[@lee_price]

What is the benefit of: .map((res: Response) => res.json()); over .map(res => res.json()); They both give the same result?

[@paulhalliday]

+Lee Just implicitly stating the type of the response. TypeScript only, makes no difference to the transpiled code.

[@mirandacraghead7196]

Thank you so much for this awesome video!

[@paulhalliday]

Thanks for watching! 🙌🙌

[@sheetalsharma317]

hello, can I pass a parameter in service provider ? because a new http request which I want to use is depends on this dynamic parameter...

[@htmltuts1833]

I have a little problem. I have a long text in my database and i have already generated those data as a json. But when i render my app using those data that text doesn't have paragraphs. Whole text appearing as a one paragraph. Can you help me with this problem?

[@thinkagain99]

How do we make infinite scroll here if array length is more than 10 . Please help

[@azizalyunanp7787]

what the different about ionic 2 and ionic 3 ? is it same ??

[@raghunandan7706]

Side menu data updates after login. Any help would be appreciated.

[@newtonmunene]

Cannot find module generated with “Ionic g provider” when I import it to home.ts

[@ok-fi1os]

Will this work with backand?????

[@agentminus1]

i need to display data according to date..like automatically..without any clicks by user.. it changes every day..can you please suggest a solution..thanks

[@AudriezWorld]

Hi Paul, do you have any video on how one can have a news app in Ionic using a news API? Please do help.

[@paulhalliday]

What news API are you thinking of? :)

[@AudriezWorld]

Well I saw some free news Api from newsapi.org and was wondering how can I integrate it in my ionic app

[@miryalkarakshay]

You are a savior! Thanks for the video :)

[@EduardoHernandez-sk7ip]

when write .do((res : Response) => console.log(res)) an error : Argument of type '(res: Response) => void' is not assignable to parameter of type 'PartialObserver'. Type '(res: Response) => void' is not assignable to type 'CompletionObserver'. Property 'complete' is missing in type '(res: Response) => void'. appears :(

[@nilupulnuwan1160]

hello, can you tell how data transfer among ionic 2 and mysql database ? thank you

[@paulhalliday]

SQLite and Ionic 3 is something I've been meaning to cover for a while. I'll see if I can get this up soon.

[@watsoncyrusanikwai3888]

Want to consume data from a REST API (Odata) with mysql as database.

[@mithuns8410]

My browser wont allow url without https, how to fix that i am getting console error while using http

[@mrjeetmumbaikar8731]

can i retrieving data fron laravel localhost to ionic?

[@adityapandit6509]

sir i am using my own rails api..but when i used .map((res: Response) => res.json()) it does not return json objects to console the only thing i get is responce and please let me know i am new to ionic

[@samyassam9159]

Domo Arigato :D !! Can you make a video about Bluetooth serial please sensei ?

[@paulhalliday]

I certainly can! It looks like it would be a fun video actually. :)

[@samyassam9159]

Paul Halliday Thanks a lot :DD you are the best :D

[@medzjohnbaldono2343]

can you make a tutorial on how to display the file like docx, txt. or ppt, from mysql php server database into Ionic app ? Please..

[@hadrieeriee3593]

Hello can you help me with data transfer between ionic and telegram

[@shaggy6700]

Yet another awesome video 🙂

[@paulhalliday]

Thanks Sagaya! It means a lot. :)

[@alierensevinc7553]

which extensions you use for ionic ? Thank you

[@alierensevinc7553]

I mean visual studio code extensions :D

[@webinspire]

do you have a solution for the CORS issues on the emulator? CORS is in my API enabled (Access-Control-Allow-Origin: *)

[@fillmore200]

Does this still work on ionic 3 ? in the home.ts getMessages() function ,we can no longer reference getMessages().subscribe [Cannot read property 'subscribe' ] Would appreciate it if you could provide a workaround.

[@chipekowasa6571]

can't seen to get this to work on a device though

[@TheCodebookInc]

Cannot make post request with headers content-type: application/json

[@Ing-wen]

How to highlight unused symbols? like 5:28 (line 2) .

[@nimeshmadhushka]

in the last line subscribe command is not working. any ideas for that??? getReadings() { this.semsService.getReadings().subscribe(data =>this.switchList = data) }

[@Arshnaaz.]

.subscribe(data => {this.customerList = data} );

[@adir191]

clear and great explanation! thank u!

[@paulhalliday]

Thanks a lot. What would you like to see next?

[@adir191]

Firebase with ionic 3 or credit card option.

[@devillspdr]

what if my json contains more than a 100 of key/value pairs. How to show them in my template with *ngfor?

[@paulhalliday]

NgFor iterates over an array of values. Ensure you're iterating over an array and bind to the results with Angular's data binding. If you'd like to just show the entire key/value pairs in the view, use the JSON pipe: {{myArray | json}}

[@devillspdr]

Paul Halliday I see ! thx a lot. didn't know about the json pipe. I Was going to make a custom pipe.

[@anmolnarang8814]

I'm getting the below error.. Plzz guide me what to do.. 'localhost:8100' did not find 'localhost:8100' in the Access-Control-Allow-Origin response header for cross-origin resources at 'localhost:100/api/'

[@batsaikhanorgil9153]

can you make tutorial about angular 4 ?

[@paulhalliday]

Yup! Lots on the way regarding Angular 4 and Ionic 3.

[@FxrrxtIII]

how to import .txt to show on app ?

[@inge81]

how send parameters?

[@sheetalsharma317]

thank you sir for this great video.. could you please tell me how to use services between firebase and ionic 3 ?? sir plz its a request to you... :D

[@paulhalliday]

Hi Sheetal, I'll be covering Firebase extensively pretty soon within my Learn Ionic 3 From Scratch course. www.udemy.com/learn-ionic-3-from-scratch Should be exciting! :)

[@rafaelyahu]

Touch us about login with msql ?

[@ilkeraksu1739]

thankyou paul

[@Pedrobusou]

Hi Paul!, I need to provide an ApiKey in order to get my data, where can I do it? Im trying this, but seems not to be working. Error: No 'Access-Control-Allow-Origin' header is present on the requested resource. I also get Error: Observable.throw is not a function getMessages() { let myHeaders: Headers = new Headers; myHeaders.set('ApiKey', "112BF5E5-76FC-494F-9A47-AD0E2CF5F3DD"); return this.http.get(this.url + "GetChainStores", myHeaders) .do(this.logResponse) .map(this.extractData) .catch(this.catchError) } Thanks in advice!

[@paulhalliday]

Hi Pedro, You'll have to add import 'rxjs/add/observable/throw' to use throw. I think I must have cut it off the video. With regard to your No-Access-Control-Origin issue, that's due to Cross Origin Resource Sharing (CORS). You're most likely getting that because you're trying to access a HTTP origin from your localhost. If you run it on the device with ionic run , this should circumvent the issue as file:/// doesn't count as an origin.

[@Pedrobusou]

Hey, thanks a lot, im now conecting to the service but I cant still get the data, how do I provide the apikey? Error: 405 (Method Not Allowed)

[@Pedrobusou]

Also i have just found this extansion that allows your chrome to run without the Allow-Control-Allow-Origin Error. chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

[@AstroFiero300]

Hi... I have a problen adding property "Authorization: Bearer myToken" into HttpHeaders, when i create "let header = new HttpHeaders();" and i do "header.set('Authorization', Bearer myToken)" (or .append(...) ), I get status=401, statusText: "Unauthorized" and not find property Authorization in header object... But when i create directly on "let header = new HttpHeaders({'Authorization': this.TokenType + ' ' + this.AuthToken})" i get status=0, statusText: "Unknown Error"... Can Anyone help me.

[@AstroFiero300]

I found de solution. I've changed on backend (lumen 5.6) the file "public/index.php", adding two lines:

[@CariagaXIII]

providers gets added automatically now

[@EZEQUIELMATIASQUIROGA]

PERFECT!!!!!! TANKS

[@yeffersonguarnizo4772]

awesome, thanks bro :D

[@naderal-ghazu2222]

You should place "*ngFor" in the item tag, not the list tag, otherwise you are creating many lists instead of many items.

[@JeffreyChaverra]

Thank you!!!!!

[@paulhalliday]

+Yeffrey Chaverra Thank you for watching!

[@Mirrowed]

sound volume is very low in video. need more louder

[@awaisarif279]

ERROR! .json() is not defined

[@paulhalliday]

Hi Awais, were you able to fix this?

[@awaisarif279]

First of all i'm happy to respond to me thanks for this some .json() is not working so i'm not using it and there is an other error i'm working with an api that respond (cross-origin request blocked)

[@paulhalliday]

I’d suggest looking into CORS and adapting your API to work with this. developer.mozilla.org/en-US/docs/Web/HTTP/CORS