Ember-CLI Tutorial - Working with Ember Data and external API's

[@Chmelewsky]

I recently got moved to the Ember team at work and these tutorials are a life saver. Thanks for the great work!

[@ScottBatson]

Thanks for watching! Remember to swing by the Ember slack or discuss.emberjs.com/ if you have questions as you're ramping up with Ember.

[@indiaengineering]

I love you scott. You won't believe but I watch your first video 3 full times. It's great. Please don't stop making these videos. You're my EmberHero.

[@ScottBatson]

+arpit shah Thanks! That means a lot! Let me know if there are any Ember topics you'd like me to cover in the future (I'm just winging it).

[@indiaengineering]

+Scott Batson Thanks a lot :) Relationships, Helpers, Debugging Strategies, Authorization. Thanks again for your efforts.

[@uitrev]

Update - I've used this tutorial on Ember 3 and it works perfectly fine (so far). Good stuff!

[@iliyaokner4073]

Thank you for the update, Good to know this video is not outdated due to newer versions of ember

[@kirankothandan5529]

I am just running into ember data for first time. Your lecture is just excellent and very informative. Thank you very much.🙏🙏🙏

[@ScottBatson]

Thanks for watching! Even if it is 5 years out of date

[@alexandreformagio1909]

Thank you Scott. Very well explained, you went a little deeper in serializers and adapters, that is very important in situations where we don't have control over responses coming from the backend. Using justt one word to describe your video, FANTASTIC !!!

[@squirecd]

By far the best tutorial I've found in 3 weeks. Thanks!

[@ScottBatson]

Thanks for watching!

[@odpJatoUnitRecs]

This was a really helpful walkthrough, thanks for making my baby steps into ember digestible

[@WilmanArambillete]

Amazing tutorial! Not only very clear but also showing very useful tricks and common errors we might bump into. Thanks a lot!

[@ScottBatson]

Thanks for watching!

[@PeterParker-sy9bp]

Hey Scott.Thank you so much for this perfectly explained tutorial.This is the best explanation on the internet for Adaptar/Serializer by far.Your teaching style is a perfect fit for starters. Thank you so much for all the lessons you teach.Solid resource :)

[@ScottBatson]

Thanks for watching!

[@lomodevaca]

Hey man, just wanted to say thanks for the great turorial!. It really helped me a lot connecting my flask-api with ember. I was trying to do this for a couple of weeks now and you just made everything easy with your explanations. As I said before good work and keep them coming.

[@mdrahman1444]

You did a very good job Scott; Keep sharing your wisdom and thoughts.

[@almost5198]

The best tutorial on Ember.js out there, atleast for me .

[@ScottBatson]

Thanks for watching!

[@eternal5024]

Great video, I feel equipped to start digging into deeper Ember data API's. Thanks a million.

[@richardurena5867]

Great video! It has just what I needed and more of what I will need in the future!

[@ghoshnirmalya]

Very nice video. It would be really helpful if you could do any screencast on authentication!

[@timomuller7609]

This is a very important piece.

[@TheOnewiseburdman]

I know this is old- but thanks so much. I spent way too much time trying to get this to work.

[@ScottBatson]

Glad to hear it helped!

[@supermac9183]

This tutorial is really awesome.

[@MrSandeepjoel]

Awesome step by step tutorial scott!! Really cool!!

[@jahidhasanjibon3982]

you are awesome..super duper tutorial.

[@syamphanindra7314]

Super Tutorials Keep going..

[@marcus4619]

This was a fantastic tutorial. I have been trying to get this to work forever now. I have set up a nodejs/express/mongodb database api and need to try to connect my emberjs app to it on the same server. How is this done?

[@ScottBatson]

Where is your API being served? Is it locally and on a specific port? On my current project, the API is running at `localhost:4000/api/v1` so I have to run my ember app through a proxy to hit it: 'ember s --proxy localhost:4000' Then in my application adapter, I just declare the namespace as 'api/v1'

[@marcus4619]

ah this works great. I am still new to web development and I ask a lot questions. But thank you this is what I needed. I also have a question about using build setting environment to production and storing files in a folder on the node side and serving up the files from node

[@tombarfoot714]

Thank you for the great video! I'm new to ember, and I'm trying to connect to my existing REST Api's, this tutorial got things goin g for me. When calling own API's, ember seems to render the template before all the data has been returned, I'm only seeing 2 of 50 records. I can see all the data is returned in the debugger, but not in the app. Any comments or pointers would be very helpful. Thanks again!

[@ScottBatson]

Thanks for watching! Are you returning just one model? i.e. are you just making a request to "posts" and expecting 50 results? If you are returning multiple models, you may want to look into using RSVP.hash emberjs.com/api/classes/RSVP.html#method_hash You could also just wrap what is returned in your model hook in a promise (the model hook should wait for the request to be handled and it receives a response, but it sounds like you have an odd race condition). Happy to look if you have an example twiddle.

[@tombarfoot714]

I put my code on Pastebin here pastebin.com/wuM9qAZn I did get your example here working perfectly using jsonplaceholder.typicode.com. I then tried my own API, and ran into some kind of timing issue. My back-end code is done with PHP and it does a simple query on a MySQL table that returns JSON encoded data. (works fine with Postman, my mobile apps etc.) I'm doing this.store.findAll('logs') in my ember code, and I'm just not understanding the issue with the returned data and why I can't loop over ALL of it, and print it out as in your tutorial. Thanks again for your tut & help.

[@tombarfoot714]

Just a final FYI, after some research, this article explains what is happening: github.com/emberjs/data/issues/3657. I'm running ember-data 2.8.x and it has the same issues noted in the discussion, still not fixed.

[@cacanantes]

Thank you. The best videos about ember for new ember devs. I'm just wondering if wouldn't be better to use DS.JSONSerializer (not JSONAPISerializer) instead of RESTSearializer. It seems to me that it would avoid the need to override normalizeResponse function for any kind of json. Could you say something about it?

[@ScottBatson]

Thanks for watching. Great question! Yes, JSONserializer definitely makes more sense in this instance as a RESTserializer expects data to come through in a nested resource. I was attempting to go through an issue I first ran into when starting with Ember, where the option of additional serializers wasn't obvious (since it creates a RESTserializer by default). Ultimately, I think it is good to just know that you can play with these normalizeResponses. Most API's with this format are pretty old. Hopefully, people only have true RESTful API's or true JSONAPI to deal with.

[@almost5198]

subbed! keep the videos coming bro, u're the best!!!!!!!!!!

[@sheriffderek5333]

Great video. I was building a small example with typicode and I thought I'd watch a video while I did that. AND the video was basically exactly what I was doing! Perfect. haha. I was not really sure what pathForType() was for though. What's the story on that?

[@ScottBatson]

Thanks for watching! pathForType() is the pathname from your API's host. For example: foo-bar.com/post. "foo-bar.com" is the host and "post" is the pathname. By default, Ember-data makes the "pathForType" return the pluralized version of the model name. In this video, we shouldn't need to add our own "pathForType" method, but I thought it would be good to know it is there. Sometimes you may have an API where the path doesn't match your model name (i.e. it may be "blog_posts" or something) and you need to specify to your app how to hit that API. emberjs.com/api/data/classes/DS.RESTAdapter.html#method_pathForType

[@sheriffderek5333]

Excellent. Thanks!

[@myfishingstats1529]

Hey Scott, thanks for the great tutorial! In your previous video you showed how to use pod structure. So if you were using pod structure, would you suggest putting the adapters and serializers in the post and user folders?

[@ScottBatson]

I personally still liked having the adapters and serializers in the "adapters" and "serializers" directories because multiple routes/models could use them. Over the past few months, however, it looks like the ember core team is moving away from pod structure. It's still supported but it will no longer be the recommended way of building apps in Ember. I kind of liked it but it may be best to get used to not using it :(

[@pragatidugar]

Hey , Ember learners will receive a great help if can you please make a tutorial on differences between unit,integration and acceptance tests in ember . And walk through examples. Thanks.

[@lydiarodrigues4261]

Thanks a lot, amazing tutorial !!

[@ScottBatson]

Thanks for watching!

[@viksk4258]

awesome Scott...

[@sivasubramanianramanathan6945]

Great Stuff

[@TTVbygowtham]

very useful video

[@joseurielsalazarzuniga7674]

Thank you for the video!

[@a89529294]

Hi, I tried commenting out pathForType functions in the adapters and it still works, although I'm using Ember v3.0

[@ScottBatson]

Thanks for watching! Hmm, that seems odd. As far as I know `pathForType` hasn't been deprecated: guides.emberjs.com/v3.0.0/models/customizing-adapters/#toc_path-customization

[@a89529294]

Thanks for the reply! I think it's because if this: guides.emberjs.com/v3.0.0/models/customizing-adapters/#toc_url-conventions So I didn't have to specify the path, it is already the default.

[@indramomo9017]

Thanks Scott

[@paulhowell]

I'm actually attempting an ember version 1 to version 2 upgrade, and having to do exactly what you've shown in your video. Let's say you don't handle the action in the controller from a component, should it finally bubble up to the ApplicationRoute, then I can handle it there? This is what I'm currently having trouble with, it's like a global logout action we've got.

[@paulhowell]

Sorry I commented on the wrong video, should have been the components one. But I think I'm meant to pass in the actions to the component as an attribute, then in the actual component have another action, then will call the other action I passed in.

[@mfich]

Great video, Scott! Do you still need to use this._super( ... ) with all of the arguments specified explicitly rather than using this._super(...arguments) instead? The only reason I ask is because it looks like that may not be the case based on these docs: guides.emberjs.com/v2.11.0/models/customizing-serializers/#toc_customizing-serializers

[@ScottBatson]

Thanks for watching! That's interesting--it wasn't the behavior I noticed when preparing this video but I'd trust the official guides ;)

[@muhiuddinshahani349]

nice one on Ember i follow all the steps of video and working perfectly . But having issue when i access my own local server the records are not coming from server how can i know does my Ember application is connected to the local server or not ?

[@ScottBatson]

Thanks for watching! Is the host in your adapter pointing to localhost? How are you running the local server? It shouldn't be much different, but there may be issues with CORS you'd have to resolve if it is hosted under a different port

[@EmadAlblueshi]

Thank you

[@SergueiCambour]

What is most difficult to understand is the relation defined between Post and User was userId: belongsTo('user') instead of user: belongsTo('user') and when you called in your template: post.userId.name you got a User name. Why so ? API sent userId as an Integer value, by which magic trick Ember guessed that when calling post.userId.name it should return a name of a User ? Really still weird for me ... How Ember knows that it should hit a User resource when having just the userId value in the JSON sent for /posts request ?

[@joaocardoso5475]

Thanks a lot!

[@ivandong]

Why you didn't create an "application" adapter to handle the host instead of creating one and importing it to each adapter?

[@ScottBatson]

You could absolutely do that, but then you are making the assumption that all AJAX/Ember Data requests will be hitting that API. There may be instances where you are working with multiple API's in your app (I've worked on apps that had an API for user data, an API for our Blog from WP and one for public financial information) and you may therefore have 3 types of adapters that you want to extend from. But if there's 1 API, then yes, the application adapter is definitely the right way to go! I just wanted to cover something less obvious.

[@ivandong]

I see. Sounds very reasonable. I am learning more about Ember-data and have seen the "application" practice, i guess because it might be more practical for demonstration purposes. The scenario you mention sounds like a more real life enterprise case. Thanks for the answer. This is a very nice video.

[@almost5198]

btw when using the dynamic route why did you specify userId return this.store.query('post',{ userId: params.id }) i used to do this before but it doesnt work here return this.store.query('post',params.id) Is it becoz of the relationships in the models?

[@ScottBatson]

Thanks for watching! Good question. I specified "userId" as I wanted to list all the posts for a specific user. You can try the query yourself by directly typing it into the URL: jsonplaceholder.typicode.com/posts?userId=2 . You will see only posts from a user with an id of 2. this.store.query('post', params.id) won't quite work. store.query expects 2 params. The first is the name of the model and the second is a hash with key value pairs. If you want to get a specific record by an id, you would want to use "findRecord" return this.store.findRecord('posts', params.id)

[@almost5198]

o thanks,i got confused between findRecord and query, my bad.

[@MrTheDanils]

Hi Scott! Say me please, how i can to make adapter for all types like 'jobs, messages etc.'? Without requestForType.

[@ScottBatson]

I'm not sure I follow the question. Could you elaborate?

[@pragatidugar]

Hey.. so whats the other option of getting data in our route ,if I want to hardcode data and not get from jsonplaceholder.typicode.com ??

[@almost5198]

HOpe you do a tut on ember simple auth

[@sanitthale3185]

Hi Scott, Awesome Video.. I was able to follow your video and able to work with external API but currently I'm facing issue with different external API which related to 'Origin policy' i.e. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:4200' is therefore not allowed access. I tried many things but no luck I'm hoping you can help to configure this external API. Thanks In Advance.

[@ScottBatson]

You can set content-security flags in your environment.js, but this may actually be your browser blocking the request. You can utilize ember-cli-content-security-policy to get around it (hopefully): github.com/rwjblue/ember-cli-content-security-policy

[@vivekraj_kr]

Nice tutorial.. do you have its source code...?

[@ScottBatson]

No, sorry. This was on my old computer and I never pushed it up anywhere :(

[@vivekraj_kr]

Scott Batson if it's possible pls push it on GitHub.

[@AshishKumar-fw5jg]

I was using Country rest api "restcountries.eu/rest/v2/all". I have got issue at some place , couldn't way to find out. i serialized the data and console it , it shows . But at UI it doesn't . shows error "Assertion Failed: normalizeResponse must return a valid JSON API document: * Top level of a JSON API document must be an object"

[@AshishKumar-fw5jg]

thanks ... i got solution

[@4funszejk442]

@@AshishKumar-fw5jg tell me how you solved it, i also have such a problem

[@saranguru6100]

`Error while processing route: posts Assertion Failed: Unable to find transform for 'body' EmberError@localhost:4200/assets/vendor.js:13869:31` getting this error after adding the arguments in this._super() method.Response is coming for my app.but its not dispalying in the page.Kindly help me out.

[@mohamadelmousawi2519]

Great explanation, i don't know for what reason, but i got this (localhost:4200/posts/77) working without making any changes to normalizeResponse(...). Thank you!

[@ScottBatson]

Thanks for watching! I believe there have been some updates to Ember Data since this video was made that makes serializers better at working with different payload types. But still good to know you can go in there and make changes if you have to!

[@gu123123123]

Does anybody know where the code from this video can be downloaded from?

[@ScottBatson]

Unfortunately, I never pushed this up to GitHub and I no longer have the computer this was recorded on. So, I think the code for this is gone forever :(

[@pragatidugar]

can you please share github repo?

[@ScottBatson]

Unfortunately, I didn't think to save this repo when I created it and it has since been lost :(

[@jaxgarry7881]

this error in later versions "findAll is not a function" , is a real roadblock. if anyone has a way around this, please let me know. maddening. thanks

[@ScottBatson]

Sorry to hear that. Unfortunately, I haven’t worked in Ember for a few years. If they deprecated it though, it should be documented somewhere what the alternative is

[@mateolincango9843]

Pls let me know if u find a solution I have the same problem and i was looking for it on internet but i couldn-t find a solution

[@pragatidugar]

hey ..this is great tutorial, but in localhost:4200/posts, I am getting following error: Error while processing route: posts Assertion Failed: normalizeResponse must return a valid JSON API document: * Top level of a JSON API document must be an object Error: Assertion Failed: normalizeResponse must return a valid JSON API document: * Top level of a JSON API document must be an object

[@ScottBatson]

Hi Pragati. When this video was created, the default serializer that was generated was a RESTSerializer. That has since changed and now they default to JSONAPISerializer. JSON API has a strict format you need to follow. Since the API used in this video doesn't follow that format, you'll want to change your serializer to RESTSerializer. You can read more on the JSON API spec here: jsonapi.org/

[@pragatidugar]

hey Scott,thank for quick reply..but i did changed my serializer to rest.what else?

[@ScottBatson]

That should have been all you had to do. Are you still getting an error with normalizeResponse?

[@pragatidugar]

Scott Batson yes

[@ScottBatson]

hmm. It's hard to diagnose without seeing the code. Do you have a repo?

[@michaelcoombs7048]

“CLI Tutorial”