Super Rentals 3.17 Tutorial - Chapter 9 - Route with Dynamic Segment issue

Learning Team
1

Hi All,

I’ve just been making my way through the Super Rentals tutorial (updated to v3.17) and I’m having an issue with dynamic segments in one of the routes.

Essentially the application runs fine, and I’m presented with the main page which has the list of rentals in our example. If I select one of the properties it navigates to the detail page (i.e. detail route) and the page renders correctly. The issue is that if I refresh the page at that point, or manually navigate to the detailed route URL without going through the main page then the page does not render at all.

Looking at the inspector the model request fails; the inspector says that the Promise to fetch the JSON failed. Here’s where the fetch call is made:

export default class RentalRoute extends Route {
  async model(params) {
    let response = await fetch(`/api/rentals/${params.rental_id}.json`);
    let { data } = await response.json();

    let { id, attributes } = data;
    let type;

    if (COMMUNITY_CATEGORIES.includes(attributes.category)) {
      type = 'Community';
    } else {
      type = 'Standalone';
    }

    return { id, type, ...attributes };
  }
}

I initially picked up the issue because my Acceptance Test failed, which attempts to navigate directly to a detail page.

I’m convinced (but maybe naively) that the fetch call which is attempting to dynamically filter the JSON does not work. I believe the reason that I can navigate to the main page and then the subpage without issue is that Ember knows that it already has the model and so is not attempting to “refetch” the data.

I have checked Github and the app/routes/rental.js is on the Ember Tutorial repo is exactly the same as mine.

I’ve been looking at this on and off for several days, and I’m pretty persistent, but I thought it might be useful to reach out for some help. If anyone has any idea as to why I am seeing this behaviour then please let me know.

Thanks,

Dave

2

Hi Dave, welcome! Sorry you’re running into some issues following the tutorial. Do you have any more details about why the JSON fetch failed? It sounds like your hunch is right, that if you navigate there it works because it has the model so the model hook isn’t run.

Can you confirm that your public/api directory looks like this and that all four of the files have the correct data (this is the relevant section from the tutorial)?

public
├── api
│   ├── rentals
│   │   ├── downtown-charm.json
│   │   ├── grand-old-mansion.json
│   │   └── urban-living.json
│   └── rentals.json
3

Hi Dan,

Thank you so much for your swift response. I realised pretty quickly from your explanation what I must have done wrong. I retraced my steps through the tutorial and I mistakenly copied the JSON code for the rentals file without copying the ZIP bundle and placing all of the files under public as instructed. This is the challenge of tackling these things late at night after a “day job”.

I’ve now setup the JSON correctly (as instructed in the tutorial and reiterated by your response) and tested it and everything works perfectly.

Thanks again.

4

Awesome! Glad you got it working. That’s one of the difficult parts (to me at least) about learning new stuff, if you miss a step it can really throw things off. You had some good debugging instinct in regard to the difference in data loading behavior, that can be a tricky thing to remember even with a lot of experience :grin: