how to request remote data for category?

[wilbyang]

In shop-category-data.html, there is a hard coded categoryList, is is possible to use http get to prepare this data?

[jsilvermist]

Yea what @spyhole said, just remove the hardcoded array, take out value: categoryList, so that you have:

categories: {
  type: Array,
  readOnly: true,
  notify: true
},

then add a constructor with:

constructor() {
  super();
  
  fetch('path/data.json').then(data => data.json()).then(json => {
    this._setCategories(json);
  });
}

[fabiopalumbo]

Im looking to a similar issue, is it possible to fetch the data from firebase real time database? any guidelines?

[arlejeun]

Can you please help me by pointing out how would you implement pagination? I couldn't find examples with Polymer. So far, I'm trying to change the app-route but I'm not sure it is appropriate

[jsilvermist]

@fabiopalumbo I'm not sure about how the shop would react to real time data changes, but for a simple static parody of the fetch example above but using firebase, you could use something like this:

constructor() {
  super();

  firebase.database().ref('/shop-data/').once('value').then(snapshot => {
    this._setCategories(snapshot.val());
  });
}

[samcarecho]

As far as I know, the Shop app is not supposed to be used in production. It's seems to be just a demo case of the usage of Polymer.

[dravenk]

reply https://github.com/Polymer/shop/issues/143#issuecomment-353170407
@jsilvermist Thanks your e.g. It make that request remote data for category be possible. But it's not enough. Because it's request remote data every time when the categories is call. It's make that unable to use offline. I tried to implement a method _getCategories to retrieve data from remote, and I tried to save the Categories data into browser IndexedDB. But only the home page refresh when the first data is retrieved. The /list/ and /detail/ is 404 on the first load.

[dravenk]

    constructor() {
        super();
        this._getCattegory()
    }

    _getCattegory() {
      let that = this;
      setTimeout(function () {
          that.categories = categoryList
      },5000)
    }

    static get properties() { return {

    categoryName: String,

    itemName: String,

    categories: {
      type: Array,
      // value: categoryList,
      // readOnly: true,
      notify: true
    },

If it takes too long to get the categories, crash error

shop-category-data.js:73 Uncaught TypeError: Cannot read property '0' of undefined

  _getCategoryObject(categoryName) {
    for (let i = 0, c; c = this.categories[i]; ++i) {
      if (c.name === categoryName) {
        return c;
      }
    }
  }

this.categories is undefined