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

Working with a Local Data Source

Learn to interact with the back-end server and receive data from the local data source.

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);
  }
}
...