CODEWITHSUNDEEP
javascriptember.jsember-dataember-clioffline
JEEVAN GEORGE ANTONY
JEEVAN GEORGE ANTONY

Reputation: 186

How to store,retrieve and delete data using Ember Data?

am a newbie working with emberJs.

Currently, am developing an ember app that has reached a stage to implement the offline feature where previous data stored has to be accessed while offline.

In my app following code is of one of the templates I use, templates/bbc.hbs:

{{#link-to 'bbc'}}<img src="/assets/images/bbc-news-icon.png" alt="bbc news logo" style="max-width: 150px;min-height:150px;">{{/link-to}} 
{{log model}}

{{#each model.articles as |item|}}
<hr>
<div class="panel panel-primary">
<div class="panel-heading"><span class="badge">Title</span>
<h3>{{item.title}}</h3></div>
<div class="panel-body">
<span class="badge">Description</span>
{{item.description}}
</div>
<div class="panel-footer"><span class="badge">URL to News</span>
 <a href={{item.url}} target="_blank" role="link" aria-label={{item.title}}>   {{item.title}} </a>
 </div>
</div>

{{/each}}
{{outlet}}

and for the above template following is the corresponding route js file, routes/bbc.js

import Ember from 'ember';

export default Ember.Route.extend({
model(){
    return Ember.$.get('https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=c4ea221e6833496bad7716c6c4fc5ece');
}
});

what I need to know is:

1)how to implement the ember data feature so that I could fetch the JSON data while online through this url and store it in a data-store.

2)Retrieve data from data-store to the route js file when the user moves to this route while online/offline.

3)Delete all previous data for that route if selected again while online and update new data received through the Url that receives JSON data. And if Offline just skip this step.

I have already implemented the service-worker with broccoli-serviceworker in this app to implement the offline feature.

Since I didn't find any way to store the data that could be accessed while offline like using IndexedDB feature I think ember data could help.

while asked for a review to my reviewer, he personally suggested me to use Ember Data with the broccoli-serviceworker package to configure a service worker that has access to Embers Data library.

if there is a better option regarding storing and retrieval of data that too with offline compatibility, its welcome.

Please do give a solution with step by step instructions that has to be followed to solve this issue

Github repo link to my project: https://github.com/JEEVANJGA/Capstone-News-App

Upvotes: 0

Views: 306

Answers (1)

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

Just wrap your Ember.$.get with RSVP.Promise and use localStorage for caching:

  1. Try to get feed
  2. If request is successful, save data to local storage and resolve promise
  3. If request failed, that's mean no internet, retrieve data from local storage and resolve promise. Optional: set timeout to refresh model in a minute.

With respect to the above instructions given by @Gennady Dogaev, @JEEVAN GEORGE ANTONY changed the routes/bbc.js file in the question as follows:

import Ember from 'ember';

export default Ember.Route.extend({
model(){
function getJSON(url){
  return new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url);
    xhr.onreadystatechange = handler;
    xhr.responseType = 'json';
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.send();
    function handler() {
      if (this.readyState === this.DONE) {
        if (this.status === 200) {
          resolve(this.response);
        } else {
                  reject(new Error('getJSON: `' + url + '` failed with   status: [' + this.status + ']'));
        }
      }
    }
  });
}
 return getJSON('https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=c4ea221e6833496bad7716c6c4fc5ece').then(function(json) {
      // on fulfillment
       var data = JSON.stringify(json);
         localStorage.setItem('bbcnews', data);
         return JSON.parse(data);
    }, function(reason) {
       // on rejection
              console.log(reason);
              var data = JSON.parse(localStorage.getItem('bbcnews'));
              console.log(data);
             return data;
    });
  }
  });

This solves the offline accessiblity of data with ember using localstorage even without using ember data, pouchDB or indexedDB features.

Upvotes: 1

Related Questions