Angular 2 with jQuery function scope issue

Question

I cant seem to call the addtoItems() function within the jQuery.Post I need to search for items for every store, then push everything into the this.items array. Maybe there is an easier way? Obviously I'm new to Angular 2.

import {
    Page,
    NavController,
    NavParams,
    Storage,
    LocalStorage
} from 'ionic/ionic';
import {
    CalculatorPage
} from '../calculator/calculator';

@Page({
    templateUrl: 'build/pages/storelookup/storelookup.html'
})
export class StoreLookupPage {
    constructor(nav: NavController, navParams: NavParams) {
        this.nav = nav;
        this.local = new Storage(LocalStorage);
        // If we navigated to this page, we will have an item available as a nav param
        this.selectedItem = navParams.get('item');
        this.items = [];
    }
    addtoItems(itemlist, storeid, phone, city, st, address, distance) {
        for (var o = 0; o < itemlist.length; o++) {
            this.items = []
            this.items.push(itemlist[o]);
            this.items[o].storeid = storeid
            this.items[o].phone = phone
            this.items[o].city = city
            this.items[o].st = st
            this.items[o].address = address
            this.items[o].distance = distance
            console.log(this.items)
        }
    }

    getItems(query) {
        this.items = [];
        var name = encodeURIComponent(name);
        this.storelist = JSON.parse(this.local.get("stores")._result)
        var i = 0;
        var i1 = setInterval(function() {

            this.local = new Storage(LocalStorage);
            this.storelist = JSON.parse(this.local.get("stores")._result)
            var storeid = Number(this.storelist[i].id);
            var phone = this.storelist[i].phone;
            var city = this.storelist[i].address.city;
            var st = this.storelist[i].address.state;
            var address = this.storelist[i].address.address1;
            var distance = this.storelist[i].distance;

            jQuery.post("http://www.walmart.com/store/ajax/search", {
                    searchQuery: "store=" + storeid + "&size=50&query=ipad&offset=0"
                })
                .done((data) {
                    var storeresult = JSON.parse(data.searchResults);
                    var preitems = storeresult.results.filter(isUPC);
                    this.addtoItems(storeresult.results, storeid, phone, city, st, address, distance); //TypeError: _this.addtoItems is not a function

                    console.log(this.items)
                });
            i++;
            if (i === this.storelist.length) {
                clearInterval(i1);
            }
        }, 1000);

    }

Change done function to.done((data) => {...}).

Sasxa
– Sasxa

2016-02-27 18:20:31 +00:00
Commented Feb 27, 2016 at 18:20 — Sasxa
– Sasxa, Commented Feb 27, 2016 at 18:20

Günter Zöchbauer · Accepted Answer · 2016-02-27 18:19:27Z

2

Use arrow function

(x) => { ... }

instead of

(x) { ... }

and

function (x) { ... }

then this. always refers to the current class. Otherwise you'd need to use .bind(...)

Examples from your code

.done((data) {

var i1 = setInterval(function() {

answered Feb 27, 2016 at 18:19

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 with jQuery function scope issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related