# Help understanding interaction between controller and model and route

**URL:** <https://discuss.emberjs.com/t/help-understanding-interaction-between-controller-and-model-and-route/18290>\
**Category:** Uncategorized\
**Created:** [October 16, 2020, 12:05pm UTC](https://discuss.emberjs.com/t/help-understanding-interaction-between-controller-and-model-and-route/18290 "2020-10-16T12:05:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)\
**Post date:** [October 16, 2020, 12:05pm UTC](https://discuss.emberjs.com/t/help-understanding-interaction-between-controller-and-model-and-route/18290/1 "2020-10-16T12:05:20Z")

</div>

I have an app where the controller has an action which makes a HTTP request and I want to get the json payload and use it in my template of the same name. I think I am meant to use setupcontroller and set the payload to the model. Do I use setupcontroller inside my controller? Or am I meant to create a route for this? Could someone help explain how these would all interact together. Much appreciated

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [October 16, 2020, 3:04pm UTC](https://discuss.emberjs.com/t/help-understanding-interaction-between-controller-and-model-and-route/18290/2 "2020-10-16T15:04:08Z")

</div>

Hi @alyssa21, welcome! Here are the broad strokes:

- Route: a route typically encapsulates data fetching, and is also responsible for mapping an app path/url to a specific template. Usually you set up a route in your router with the “path” that you want, and any path parameters (dynamic segments) and then the route will define what data is fetched to populate that template
- (Route) Template: defines the DOM matter and components that will be rendered for the matching route
- Controller: holds view-level state that should be exposed to the route template. Typically the route fetches a model and passes it to the controller for the template to consume (more on that below).

Data can be fetched outside of a route, for example in a controller or a component, but in general you don’t want to do this _unless you know what you’re doing_. Mostly because routes encapsulate asynchronous data fetching very nicely and take care of a lot of the hard parts of that (error handling, loading state, blocking render until data is present, etc) for you.

Another thing to know is that, by default, a route implements a setupController hook that sets the result of the model hook on the controller for you as `model`. You don’t need to do this manually unless you really want to.

Could you describe your controller a little more, and the HTTP request it’s making? It might be a good idea to refactor it to fetch that data in the model hook of the route. If not you may want to encapsulate it in a better way.

---

<div class="post-metadata">

**Author:** ![alyssa21](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alyssa21/32/17222_2.png) [@alyssa21](https://discuss.emberjs.com/u/alyssa21)\
**Post date:** [October 16, 2020, 11:52pm UTC](https://discuss.emberjs.com/t/help-understanding-interaction-between-controller-and-model-and-route/18290/3 "2020-10-16T23:52:41Z")

</div>

Thanks for that!

I dont think I want to map my app templates to be mapped to a specific path so I think I will continue with fetching data inside my controller.

Sure, my application.js controller is very simple and has actions for when a button is pressed, such as making this POST request using async. I grab the response data in a variable using await response.json() but then I am stuck in going about passing this json payload to my template of the same name. Using setupController in a route is the only way of making this work?

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [October 19, 2020, 3:15pm UTC](https://discuss.emberjs.com/t/help-understanding-interaction-between-controller-and-model-and-route/18290/4 "2020-10-19T15:15:12Z")

</div>

> I dont think I want to map my app templates to be mapped to a specific path so I think I will continue with fetching data inside my controller.

A controller is inherently coupled to a route so technically your application controller is still going to be coupled to the “root” route, but yes. Makes sense.

> making this POST request using async. I grab the response data in a variable using await response.json() but then I am stuck in going about passing this json payload to my template of the same name. Using setupController in a route is the only way of making this work?

Yeah a POST is something you usually do in a controller or component so that makes more sense. All you need to do from a controller to set something on the controller is `this.set('propNameHere', stuff)` in classic Ember or in Octane you should just be able to do `this.propNameHere = stuff;`. The controller has “access” to anything declared on the component class, so in the template this data would then be accessible by `{{this.propNameHere}}` or `{{#each this.propNameHere as |item|}}` etc.