Angular Tutorial - 21 - Fetch Data Using HTTP
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
Angular | Angular Tutorial for Beginners | Fetch Data Using HTTP
*There is a change in rxjs version 6. Please watch this video to fix that.*
th-cam.com/video/ScaKGrW5s0I/w-d-xo.html
Awesome, thank you!
Very nice.....thnx.....do upload more videos
iam using angular7 when i subscribed to observable it is showing error " cant find name 'subscribe' "
@@ifthikkarudheent1159 Delete the ";" for the line before the .subscribe(data...
can you please explain why we are creating an employee inetrface as we know what data is coming from backend and we can directly use it and subscribe it..
Jeez, this video could win an Oscar if there was a category for 'Most clear explanation to a complex topic'.
Second vote that - I was stumped for several hours on this , opening dozens of Stack Overflow and Angular IO files on how to accomplish this. The nice thing is how the interface was used to map the data. Vishwas does a great job for Angular newbies like myself ( total Angular experience ~ 16 days )*
*From Python land , which is awesome but they don’t have material Ui
Agree 110%
For angular14 and other issues
>> import {Observable} from 'rxjs';
>> in subscribe() define the data type of 'data' FOR EXAMPLE .subscribe((data=any)=>)
>> also in employee = [ ] do employee:any instead
Overall everything is working completely fine.
These videos deserve more views. I am currently learning angular and your videos are by far the best. You explain step by step in such an easy way that anyone would easily understand the process.
your Angular series saved me from assignments, love your short and clear videos. Thank you!! ☺
hi how are you
Man, thanks so much for your tutorials with detailed explanation! I started learning Angular with your videos.
when I try the subscribing code, I get an error for the 'employee = []; cant assign type x[] to type never[] can someone help
public employee:any[] = []; this will solve your problem
Fix for those who are having issues with Observable on Angular 6+ just run the command "npm install rxjs-compat" then you should be good to go
Angular 7 use
*import { Observable } from 'rxjs';* instead of import { Observable } from 'rxjs/Observable'
hello man did u get any solution for this
@@venkatsai- What he has given IS the solution.
Thank you so much
Man, I love you! You explained so clear that even I undersrand. I mean, I spent really 9-10 hours to figure out how this schema works and you explained it within 2 videos. Glad you do this content! Even after 5 years from video appeared, it is still helpfull!
You are a Godsend. I'm loving this series. Thank you!
I do not speak and I do not understand English, but I was able to understand and learn a little Angular with your video.
Thank you very much.
great video...your clear audio, presentation screen, way of presentation, and words you have used, everything made this tutorial perfect and easy to grasp...
Is creation of IEmployee structure unnecessary? putting instead, works
I'm trying to do the same but, my employees array is always undefined. The data has the content and it is asigned to my array in the subscribe method because if have checked it. However, when the method its finished I check again my array employees and its empty, as if nothing had happened.
Man thank you for this video. You thought me Redux and now you are teaching me Angular. :D
For those getting error in the json array file,
1) Replace all the single quotes with double quotes (can be done easily by using ctrl+h in vs code)
2) Remove the comma from the last value of every object in the array
Very good explanation. Not even Angular official site tutorial explains like this.
one of the the likes that you are getting every day on your videos one by one are mine! Good work dude! I Subscribed on just completing your first video.!
Oh wow that cleared up a lot very quickly. Also thank you for using a good readable font size.
best described Observable and Subscription ever (starting at 5:20)
no one has explained this subject the way u did it. love your videos.
Hi, Sir, thanx for making tutorials on Angular 6. i learnt a lot of concepts from your tutuorials such as Di, Observables...etc
i think your concepts are crystal clear! and also your teaching methodology is so much awesome!
i like the way as you teach.
Sir i'v a request, kindly make a tutorial on LOGIN AND REGISTRATION SYSTEM in MEAN STACK 6 or at least 5 using mongoose
i am waiting your response imran khan from Lahore, Pakistan
What an unbelievably clear explanation. Wow.
error solves:
1. if there is error in subscribe, then check if there is a semicolon in before line. If it's there, remove it.
2.correct to public employees=[] as any; in both employee list and employee detail components
3. remove last semicolon in employee.json
4. correct it to import { Observable } from 'rxjs';
Really Really useful. Very well explained. Thanks a million! Please do more video.
your explanation is the best. Hope you make more content with Angular's new features also
Your video nice..i'm fresher so after two time watching your video then only I can understand....tq....
When god think I'm gonna teach anguler service today❤
Thank God till this tutorial I didn't got stuck anywhere, got running everything. Thanks
I am using Angular 8
I have written code according to this video.
But the detail of Employee list is not showing.
Good Job man!!!very good way to explain the concepts in a easy way..Thanks
I have been watching you angular videos and I have learned alot. Thanks...
your video channel is very helpful for so many members and also very helpful for how are started as a beginner
FYI - if your import of Observable is failing because you are using version 6 then try this:
import { Observable } from 'rxjs';
it is going to be automatically imported on VS code, it was puzzling at first but yeah
For those who are using Angular 6+ just run the command "npm install rxjs-compat" then you should be fine.
In Angular 6, this is done automatically, great
Also applied to Angular 7: import { Observable } from 'rxjs';
I like your examples, as every video is independent of previous video.
Best explanation ever, veri simple and with examples. Well done, you saved me
awesome explanation, the best in youtube
thank you for this! you're a very good teacher and clear communicator!!
I had an issue locating my employees.json file, I had an assets folder within src/app/assets and one within src/assets, I deleted the one in src/app/assets and put the json file in the src/assets folder directly and this got my app to work!
Hope this helps anyone!
I think you should add the file as an asset in the angular.json file
Perfect way to explain. Thanks for putting so much efforts.
Best explanation by far. Understood how Observable works under the hood.
Great video!! What if i want to show only the people that have the name wich start with A?
there are rarely any video that I like first then start watching
thanks man!! I was finally able to make it work, your explanation is great!
In general, quite a useful video.
But in fact, the result is a memory leak in employee-list.compopent.
You can solve this problem by assigning a subscription to a variable. eg this._subcription = this._employeeService.getEmp. And execute this._subcription.unsubscribe() in ngOnDestroy.
Or it is better to not subscribe at all. Instead, display data through the async pipe in the template. This is the best practice - because Angular will take care of unsubscribe
.
Thank you, good job explaining.
HI viswas Thank you for making such a nice video. i have one confusion please help me.
I have already setup Angular project and i have to create so many pages and each page have some static content. so
my question is for each pages i need to create new component and for each component i need to create new services? or there is other way to do this.
please make one video how to feach data from Database
Really helpful and worked first time on Angular 8.
Very nice way of explanation
Thanks Friends, your are the best, I'm learning so fast. I could understand about services and observables.
How would you code this to return an Observable and not the whole array? For example, in Java you you would do this with a Single, not an Observable.
At 4.20 you must end the propertie names for the interface using a semicolon. No clue why it does not give you a warning but it's not a JSON-object.
This is still such a helpful video.. This helped me understand Observables a bit more, thank you very much! will you post any videos using Angular 14?!
those who are getting error in importing observables write import { Observable } from 'rxjs'; instead of import { Observable } from 'rxjs/Observable'; .
one of the best angular series... Thanks Sir
I did same as this TH-cam video but data is not printed on webpage. No errors are there. Employee details like id, name, age is not displaying. What the reason is??
I notice on employee-list component you did not define “data” after you subscribed to the observable. Is that because the subscribe method knows that data means the information received from the observable?
Thought I could help. Yes you are correct. data is just a variable name in the context and could have been anything. ex c1 => class variable = c1
Hey man please use jsonplaceholder for API tutorials. Hard coded data is a big no no.
Newer version edit: To
import {Observable} from 'rxjs/observable';
From now-on we can directly use:
import {Observable} from 'rxjs';
Sir what to do when you want to recieve multiple set of json data .... with that what you've shown we can only cast on one interface..!!
Are we supposed to make a nested interface object to fit all the subset ??
Amazing explanation of observables
Thanks man, this helped me. And even more, this made mE to subscribe(); to your channel!
*Bdum tsss* :)
your explanation is great. This was very useful. Thank you
This is really useful. Thank you so much!
Very well explain.. You clarified my doubts. Thank you so much.
very clear and neat explaination.thankyou so much👌
you helped me a lot. Thanks
have you explained post meathod also in the same way?
superb and awsome tutorial. Thanks alot for sharing. now I understood clearly . Great Tutorial
Thank you so much for the explanation! It helps a lot.
Watching this and not subscribing will be unfair. :)
Excellent video series on Angular. I really appreciate the work you have done. Thank you!
Beautifull explanation..
Hi
everything is working fine no error but no data is displayed i dont know what is the issue even i have used error handler
please help me
What about returning an array of employees instead of observable from the getemployees function and how it is implemented
Brilliant explanation . Keep up the good work sir !!
Hi,
why do we use employee interface and not employee class. What is the benefit of using interface ?
Very good explanation
Saved my day thanks
ERROR in ./src/app/EmployeeDetails/EmployeeDetails.service.ts
Module not found: Error: Can't resolve 'rxjs/add/operator/map' in 'E:\angular\ApiData\src\app\EmployeeDetails'
where is the employee list being requested from? Server side or from the browser?
sir how can we fetch data from live server which changes should we made?
appreciative work!! crystal clear concept till services thank you
sir i follwed your steps but facing a single error my app is unable to find the json file which i made inside assets plz guide me
I tried to fetch data from json file but I am getting empty array.
Nice step by step explanation 👍
why use observable and not promise? what is the difference between them?
wow you are perfect, you are a very good teacher
thanks for the explanation..
Excelente...mejor imposible...bien explicado...Gracias..Saludos desde Venezuela
Really helpful. thank you
Question: how does the component know what fields to match when getting data from a backend. Meaning I do not see an assignment like id= .id. What if I named id to idd in my interface?
The Big one Bro...Completely understandable
when we work on the real project with server how to make the right folder structure and how manage all interfaces?
So Cool Man !!!... Just Described On to the point .. Great Work. !!!
you are superb sir, and your all videos are amazing.
you are PRO BRO, keep cool and thanks!!
Error Ts2339 : Property 'get' does not exist on type 'HttpClient'
Awsome video man, I learnt a lot from your tutorial.
May I know why we need to have underscore when naming a private variable? Is it necessary?