ember js - service usage to show data

Question

I am new to ember js and trying to write my first app...

I have :

service app/service/event_handler.js

import Service from '@ember/service';

export default class EventHandlerService extends Service {

    eventList = [
        {
            EventName: 'test event 1',
            EventDesc: 'test event 1 desc',
            StartDate: '16.11.2023',
            EndDate: '05.02.2024',
            EventType_ID: 1,
        },
        {
            EventName: 'test event 2',
            EventDesc: 'test event 2 desc',
            StartDate: '17.11.2023',
            EndDate: '15.02.2024',
            EventType_ID: 2,
        },
        {
            EventName: 'test event 3',
            EventDesc: 'test event 3 desc',
            StartDate: '13.10.2023',
            EndDate: '01.01.2024',
            EventType_ID: 1,
        }
    ];
}

controller app/controllers/event-controller.js

import Controller from '@ember/controller';
import { getOwner } from '@ember/application';
import { service } from '@ember/service';
export default class EventControllerController extends Controller {
    // @service eventHandler;

    get events() {
        console.log("loading events");
        return getOwner(this).lookup('service:event-handler')
    }
}

and my hbs file that has a code block

<table>
                <thead>
                    <tr>
                        <th>Event name</th>
                        <th>Event Date Start</th>
                        <th>Event Date End</th>
                    </tr>
                </thead>
                <tbody>

                    {{#each this.eventHandler.eventList as |event|}}
                    <tr>
                        <td>{{event.EventName}}</td>
                        <td>{{event.StartDate}}</td>
                        <td>{{event.EndDate}}</td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>

the table is empty and i dont know what am i doing wrong :c I tried looking some tutorials and asking ai but I am still having issues...

Answer 1

Rename event_handler.js to event-handler.js.

And change your controller to:

import Controller from '@ember/controller';
import { service } from '@ember/service';
export default class EventControllerController extends Controller {
    @service eventHandler; // this line will look-up for /services/event-handler.js
}

That should do the trick.

---

Sidenote: if the value of eventList will change during runtime, consider marking it as @tracked