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 ...

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

...