Search⌘ K
AI Features
Home
Courses
Developing Robust Web Applications with Ember.js

Working with a Local Data Source

Explore how to set up and use a local JSON data source within Ember.js routes. Learn asynchronous fetching and filtering of product data to effectively manage your app's data using Ember Data.

We'll cover the following...

Let’s set up our application to interact with the back-end server. We need to make a directory named api in our application’s main directory. Let’s create a directory and a products.json file in the public directory of our application.

Setting up JSON data in the products.json file

Let’s open the products.json file and add the product JSON data:

Node.js
{
    "data": [
        {
          "id" : 1,
          "product_title": "Test Product 1",
          "category_id": "men",
          "price": 17,
          "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
          "imglink":
            "/assets/images/men_fashion.jpg"
        },
        {
            "id" : 2,
            "product_title": "Test Product 2",
            "category_id": "men",
            "price": 10,
            "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "imglink":
              "/assets/images/shirt.jpg"
          },
          {
            "id" : 3,
            "product_title": "Test Product 3",
            "category_id": "women",
            "price": 52,
            "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "imglink":
              "/assets/images/ladies_sendals.jpg"
          },
          {
            "id" : 4,
            "product_title": "Test Product 4",
            "category_id": "men",
            "price": 30,
            "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "imglink":
              "/assets/images/ladies_shoes.jpg"
          },
          {
            "id" : 5,
            "product_title": "Test Product 5",
            "category_id": "kids",
            "price": 5,
            "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "imglink":
              "/assets/images/watch.jpg"
          }
      ]
      
}

Adding a local data source in category route

Assume that our data is coming from the server. Let’s configure our routes accordingly. We open the app/routes/category.js file and make it fetch the data from our API:

JavaScript (JSX)
import Route from '@ember/routing/route';
// import { products } from '../data/products';
export default class CategoryRoute extends Route {
  async model(params) {
    const response  = await fetch('/api/products.json');
    const {data} = await response.json();
    return data.filter(({ category_id }) => category_id == params.id);
  }
}
...