Converting Calories Tracking application to ES6 Classes

Question

I managed to recreate a MVC calorie tracker app from a course and I am trying to convert it to ES6 classes now.

I am a little stuck in understanding how to call the methods in the Module inside the Controller to return the items I need.

    class Item {
        constructor() {
            this.data = {
                items: [{
                    name: 'Salad',
                    calories: 200,
                    id: 0
                },
                {
                    name: 'Eggs',
                    calories: 500,
                    id: 1
                }],
                totalCalories: 0,
                currentItem: null
            }
        };

        getItems() {
            return this.data.items
        };

        logData = () => {
            console.log(data.items);
        };
    }


class App {
    constructor(Item, UI) {
        this.Item = Item;
        this.UI = UI;
    }

    init() {
        const items = Item.getItems();

        UI.populateItemList(items)
    }
}

const application = new App(new Item(), new UI())

When I try to call Item.logData() in the console it gives me TypeError: this.data is undefined. I researched online and it seems that the method I declared is for the constructor only. How would I go about declaring methods that I'll use in the Controller or in any other class, just like I did below by returning a method out of the constructor?

What Im trying to convert initially looks like this:

const ItemCtrl = (function () {
    const Item = function (id, name, calories) {
        this.name = name;
        this.id = id;
        this.calories = calories;
    }

    const data = {
        items: StorageCtrl.getStorage(),
        totalCalories: 0,
        currentItem: null
    }

    return {
        getItems: function () {
            return data.items
        },
        logData: function () {
            return data;
        }
    }

const App = (function (ItemCtrl, StorageCtrl, UICtrl) {



    return {
        init: function () {

            const items = ItemCtrl.getItems();

            UICtrl.populateItems(items);
        }
    }

})(ItemCtrl, StorageCtrl, UICtrl);

App.init();

Am I missing something or you want to have some kind of a private field in your classes? — Sebastian Kaczmarek, Nov 25 '19 at 07:31

score 0 · Answer 1 · answered Nov 25 '19 at 07:33

0

You need to initialise the controller first:

class App {
    constructor(Item, UI) {
        this.item = new Item();
        this.UI = new UI();
    }

    init() {
        const items = this.item.getItems();

        this.UI.populateItemList(items)
    }
}

answered Nov 25 '19 at 07:33

Clarity

10,730
2
25
35

Yes , this was the problem indeed. Thank you very much. – 1Andu Nov 26 '19 at 07:16
Also , for example , if I were to call a method before converting to ES6 classes, I would do `ItemCtrl.logData()` to display the data in the console. However I am having trouble when I try to call a method from a class.I get his: TypeError: Item.logData is not a function – 1Andu Nov 26 '19 at 07:30
Unless you define a `static` method on a class, you can't call it from class directly. All the methods except static are *instance* methods, meaning that you need to create that instance first. Check here for more info:https://stackoverflow.com/questions/11993077/difference-between-static-methods-and-instance-methods – Clarity Nov 26 '19 at 07:40

Converting Calories Tracking application to ES6 Classes

1 Answers1