Ember.js: this.store.push inside a forEach

Question

Hello I am trying to get some data in store at the startup of my ember app.

The following is in my routes/application.js file:

export default Ember.Route.extend({
  model() {
    var prods = Ember.$.ajax({url: ("/products.json"), type: 'GET', dataType: 'json', success: function(e) {
    var a = 1;
    e.products.forEach(function(f) {
        console.log(typeof(f.name));
        console.log(f._id);
        this.store.push({
            data: [{
                      id: a,
                      type: 'product',
                      attributes: {
                        name: f.name
                     }
                  }
               ]
            });
        a = a + 1;
        });
    }})
  }
});

I basically try to load some json data from locally, placed in the public folder of the app. Inside app/models/product.js my model looks like this:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string')
});

Finally my data looks like:

{
  "products": [
    {
      "_id": "58ff60ffcd082f040072305a",
      "slug": "apple-tree-printed-linen-butterfly-bow-tie",
      "name": "Apple Tree Printed Linen Butterfly Bow Tie ",
      "description": "This fun 40 Colori Apple Tree Printed Linen Butterfly Bow Tie features a design of various apple trees built from tiny polka dots. The back of this bow tie features a polka dot print in complementing colours which when the bow tie is tied will pop out from behind making for a subtle yet unique detail. The playful design, stand out natural linen texture, and colourful combinations make this bow tie a perfect accessory for any outfit!\n",
      "standard_manufacturer": "58cbafc55491430300c422ff",
      "details": "Size: Untied (self-tie) bow tie with an easily adjustable neck strap from 13-3/4'' to 19'' (35 to 48 cm)\nHeight: 6 cm\nMaterial: Printed 100% linen\nCare: Dry clean\nMade in Italy",

and so on.

When it is time to push in the store i get the following error:

application.js:32 Uncaught TypeError: Cannot read property 'store' of undefined
at application.js:32
at Array.forEach (<anonymous>)
at Object.success (application.js:29)
at fire (jquery.js:3317)
at Object.fireWith [as resolveWith] (jquery.js:3447)
at done (jquery.js:9272)
at XMLHttpRequest.<anonymous> (jquery.js:9514)

Please help me resolve this issue. Thanks :)

Did you solve your [earlier question](https://stackoverflow.com/questions/44987848/ember-app-cannot-load-json-data-from-local-file) Are you sure that you are getting a response in the success callback. if that's the case then to fix your error, you need local variable `this` and use it inside. like `let _this=this` and instead of `this.store` you need to say `_this.store`. — Ember Freak, Jul 11 '17 at 02:37
@kumkanillam I am sure i get a response object, with andrew's edit I managed to get to push all my data from the response in the store. The error in my previous question is still there but has not affected development yet. — Yiannis, Jul 11 '17 at 12:05

score 0 · Answer 1 · answered Jul 11 '17 at 06:18

0

You could use arrow functions (=>) ES 6 syntax as this is lexical scoped always to solve the ambiguity.

e.products.forEach((f)=> { this.store.push()... })

answered Jul 11 '17 at 06:18

Mohanesh

24
3

Ember.js: this.store.push inside a forEach

1 Answers1