I have the following code: import Component from "@glimmer/component"; import { apiInitializer } from "discourse/lib/api"; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { inject as service } from "@ember/service"; import { defaultHomepage } from "discourse/lib/utilities"; /* const xhr = new XMLHttpRequest(); xhr.open("GET", "/cakeday/anniversaries/today.json"); xhr.send(); xhr.responseType = "json"; xhr.onload = () => { if (xhr.readyState == 4 && xhr.status == 200) { let resp = xhr.response; let numberOfAnns = resp['total_rows_anniversaires']; let allAnns = resp['anniversaries']; // Is a list of dicts console.log(allAnns); let allAnnsUsernames = []; for (var annUserdata in allAnns) { console.log(allAnns[annUserdata]['username']); allAnnsUsernames.push(allAnns[annUserdata]['username']); } var annsOfData = {'num_anns': numberOfAnns, 'anns_users': allAnnsUsernames}; } }; return annsOfData; */ export default apiInitializer("1.14.0", (api) => { //const banner_location = settings.banner_location api.renderInOutlet( settings.banner_location, class BdaysAnnsBanner extends Component { @tracked annsDataFinal = null; @tracked bdaysDataFinal = null; @tracked areBothBannersVisible = true; @tracked isAnnsVisible = null; @tracked isBdaysVisible = null; @service router; constructor() { super(...arguments); this.fetchAnnsData(); // Automatically fetch on initialization this.fetchBdaysData(); } // Asynchronously fetch the data and update tracked property @action async fetchAnnsData() { const response = await fetch("/cakeday/anniversaries/today.json"); const json = await response.json(); let numberOfAnns = parseInt(json['total_rows_anniversaries']); let allAnns = json['anniversaries']; // Is a list of dicts let allAnnsUsernames = []; for (let annUserdata of allAnns) { allAnnsUsernames.push(annUserdata['username']); } this.annsDataFinal = {'num_anns': numberOfAnns, 'anns_users': allAnnsUsernames, 'visible': true, 'isFilled': true}; this.updateBothBannersVisibility(this.annsDataFinal); } // Asynchronously fetch the data and update tracked property @action async fetchBdaysData() { // Declare bdaysDataFinal here let bdaysDataFinal; // Fetch birthdays data const response = await fetch("/cakeday/birthdays/today.json"); const json = await response.json(); // Run the logic to process the data let numberOfBdays = parseInt(json['total_rows_birthdays']); let allBdays = json['birthdays']; // Is a list of dicts let allBdaysUsernames = []; for (let bdayUserdata of allBdays) { allBdaysUsernames.push(bdayUserdata['username']); } this.bdaysDataFinal = {'num_bdays': numberOfBdays, 'bdays_users': allBdaysUsernames, 'visible': true, 'isFilled': true}; this.updateBothBannersVisibility(this.bdaysDataFinal); //console.log(annsDataFinal); // Just to verify the result } @action updateBothBannersVisibility(bannerData) { console.log(bannerData.num_anns); // Check if it's anns or bdays if (bannerData.num_anns) { // It's anns console.log('Anns:') console.log(bannerData.num_anns); if (bannerData.num_anns == 0 && settings.hide_unused_data) { console.log(`Anns+setting: ${bannerData.num_anns == 0 && settings.hide_unused_data}`); this.isAnnsVisible = false; console.log(`isAnnsV: ${this.isAnnsVisible}`); //console.log(this.isBdaysVisible); } } else { // It's bdays console.log(bannerData.num_bdays); if (bannerData.num_bdays == 0 && settings.hide_unused_data) { console.log(`Bdays+setting: ${bannerData.num_bdays == 0 && settings.hide_unused_data}`); this.isBdaysVisible = false; console.log(`isBdaysV: ${this.isBdaysVisible}`); //console.log(this.isAnnsVisible); } } console.log(`isAnnsV: ${this.isAnnsVisible}`); console.log(`isBdaysV: ${this.isBdaysVisible}`); // Uses an inequality. If not the same (true), banner is shown. If it is the same, inequality is not satisfied, and the banner will be hidden. this.areBothBannersVisible = !(this.isAnnsVisible === false && this.isBdaysVisible === false); // Or: this.areBothBannersVisible = this.isAnnsVisible || this.isBdaysVisible; console.log(this.areBothBannersVisible); } // Getter for the data get annsData() { //return this.annsDataFinal; if (this.annsDataFinal !== null) { if (this.annsDataFinal.num_anns == 0) { if (settings.hide_unused_data) { this.annsDataFinal.isFilled = false; this.annsDataFinal.visible = false; } else { this.annsDataFinal.isFilled = false; } } else { this.annsDataFinal.isFilled = true; this.annsDataFinal.visible = true; } //this.updateBothBannersVisibility(this.annsDataFinal); // If the data is not loaded yet, return null or any default value return this.annsDataFinal; } } // Getter for the data get bdaysData() { //return this.bdaysDataFinal; if (this.bdaysDataFinal !== null) { if (this.bdaysDataFinal.num_bdays == 0) { if (settings.hide_unused_data) { this.bdaysDataFinal.isFilled = false; this.bdaysDataFinal.visible = false; } else { this.bdaysDataFinal.isFilled = false; this.bdaysDataFinal.visible = true; } } else { this.bdaysDataFinal.isFilled = true; this.bdaysDataFinal.visible = true; } //this.updateBothBannersVisibility(this.bdaysDataFinal); // If the data is not loaded yet, return null or any default value return this.bdaysDataFinal; } } get isHomepage() { const { currentRouteName } = this.router; return currentRouteName === `discovery.${defaultHomepage()}`; } //console.log(this.areBothBannersVisible); {{#if this.areBothBannersVisible}} {{#if this.isHomepage}} {{#if this.annsData.visible}} {{#if this.annsData.isFilled}} {{this.annsData.num_anns}} users are celebrating their anniversary! {{#each this.annsData.anns_users as |username|}} {{username}} {{/each}} {{else}} No one has their anniversary today! {{/if}} {{/if}} {{#if this.bdaysData.visible}} {{#if this.bdaysData.isFilled}} {{this.bdaysData.num_bdays}} users are celebrating their birthday! {{#each this.bdaysData.bdays_users as |username|}} {{username}} {{/each}} {{else}} No one is celebrating their birthday today! {{/if}} {{/if}} {{/if}} {{/if}} } ); }); The part that isn’t working are the this.isAnnsVisible and this.isBdaysVisible variables. They don’t seem to be updating, causing the banner to be shown.

It’s odd that these variables aren’t updating. Could it be that they are not being used correctly?

I’m sorry to bump this, but I still have no idea why this is happening. My code now: import Component from "@glimmer/component"; import { apiInitializer } from "discourse/lib/api"; import { ajax } from "discourse/lib/ajax"; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; import { inject as service } from "@ember/service"; import { defaultHomepage } from "discourse/lib/utilities"; import { getOwner } from '@ember/application'; export default apiInitializer("1.14.0", (api) => { //const banner_location = settings.banner_location api.renderInOutlet( settings.banner_location, class BdaysAnnsBanner extends Component { @tracked annsDataFinal = null; @tracked bdaysDataFinal = null; @tracked areBothBannersVisible = true; @tracked isAnnsVisible = null; @tracked isBdaysVisible = null; @service router; constructor() { super(...arguments); this.fetchAnnsData(); // Automatically fetch on initialization this.fetchBdaysData(); } // Asynchronously fetch the data and update tracked property @action async fetchAnnsData() { const response = await fetch("/cakeday/anniversaries/today.json"); const json = await response.json(); console.log(json); let numberOfAnns = parseInt(json['total_rows_anniversaries']); let allAnns = json['anniversaries']; // Is a list of dicts let allAnnsUsernames = []; for (let annUserdata of allAnns) { allAnnsUsernames.push(annUserdata['username']); } this.annsDataFinal = {'num_anns': numberOfAnns, 'anns_users': allAnnsUsernames, 'visible': true, 'isFilled': true}; this.updateBothBannersVisibility(this.annsDataFinal); } // Asynchronously fetch the data and update tracked property @action async fetchBdaysData() { // Declare bdaysDataFinal here let bdaysDataFinal; // Fetch birthdays data const response = await fetch("/cakeday/birthdays/today.json"); const json = await response.json(); // Run the logic to process the data let numberOfBdays = parseInt(json['total_rows_birthdays']); let allBdays = json['birthdays']; // Is a list of dicts let allBdaysUsernames = []; for (let bdayUserdata of allBdays) { allBdaysUsernames.push(bdayUserdata['username']); } this.bdaysDataFinal = {'num_bdays': numberOfBdays, 'bdays_users': allBdaysUsernames, 'visible': true, 'isFilled': true}; this.updateBothBannersVisibility(this.bdaysDataFinal); //console.log(annsDataFinal); // Just to verify the result } @action updateBothBannersVisibility(bannerData) { console.log(bannerData.num_anns); // Check if it's anns or bdays if (bannerData.num_anns) { // It's anns console.log('Anns:') console.log(bannerData.num_anns); if (bannerData.num_anns == 0 && settings.hide_unused_data) { console.log(`Anns+setting: ${bannerData.num_anns == 0 && settings.hide_unused_data}`); this.isAnnsVisible = false; console.log(`isAnnsV: ${this.isAnnsVisible}`); //console.log(this.isBdaysVisible); } } else { // It's bdays console.log(bannerData.num_bdays); if (bannerData.num_bdays == 0 && settings.hide_unused_data) { console.log(`Bdays+setting: ${bannerData.num_bdays == 0 && settings.hide_unused_data}`); this.isBdaysVisible = false; console.log(`isBdaysV: ${this.isBdaysVisible}`); //console.log(this.isAnnsVisible); } } console.log(`isAnnsV: ${this.isAnnsVisible}`); console.log(`isBdaysV: ${this.isBdaysVisible}`); // Uses an inequality. If not the same (true), banner is shown. If it is the same, inequality is not satisfied, and the banner will be hidden. this.areBothBannersVisible = !(this.isAnnsVisible === false && this.isBdaysVisible === false); // Or: this.areBothBannersVisible = this.isAnnsVisible || this.isBdaysVisible; console.log(this.areBothBannersVisible); } // Getter for the data get annsData() { //return this.annsDataFinal; if (this.annsDataFinal !== null) { if (this.annsDataFinal.num_anns == 0) { if (settings.hide_unused_data) { this.annsDataFinal.isFilled = false; this.annsDataFinal.visible = false; this.isAnnsVisible = false; } else { this.annsDataFinal.isFilled = false; } } else { this.annsDataFinal.isFilled = true; this.annsDataFinal.visible = true; } //this.updateBothBannersVisibility(this.annsDataFinal); // If the data is not loaded yet, return null or any default value return this.annsDataFinal; } } // Getter for the data get bdaysData() { //return this.bdaysDataFinal; if (this.bdaysDataFinal !== null) { if (this.bdaysDataFinal.num_bdays == 0) { if (settings.hide_unused_data) { this.bdaysDataFinal.isFilled = false; this.bdaysDataFinal.visible = false; this.isBdaysVisible = false; console.log(`this.isAnnsVisible: ${this.isAnnsVisible}`); console.log(`this.isBdaysVisible: ${this.isBdaysVisible}`); } else { this.bdaysDataFinal.isFilled = false; this.bdaysDataFinal.visible = true; } } else { this.bdaysDataFinal.isFilled = true; this.bdaysDataFinal.visible = true; } //this.updateBothBannersVisibility(this.bdaysDataFinal); // If the data is not loaded yet, return null or any default value return this.bdaysDataFinal; } } get isHomepage() { const { currentRouteName } = this.router; return currentRouteName === `discovery.${defaultHomepage()}`; } //console.log(this.areBothBannersVisible); {{#if this.areBothBannersVisible}} {{#if this.isHomepage}} {{#if this.annsData.visible}} {{#if this.annsData.isFilled}} {{this.annsData.num_anns}} users are celebrating their anniversary! {{#each this.annsData.anns_users as |username|}} {{username}} {{/each}} {{else}} No one has their anniversary today! {{/if}} {{/if}} {{#if this.bdaysData.visible}} {{#if this.bdaysData.isFilled}} {{this.bdaysData.num_bdays}} users are celebrating their birthday! {{#each this.bdaysData.bdays_users as |username|}} {{username}} {{/each}} {{else}} No one is celebrating their birthday today! {{/if}} {{/if}} {{/if}} {{/if}} } ); }); My repo: https://github.com/NateDhaliwal/Discourse-Birthdays-Anniversaries-Today

I’m not exactly sure just yet but … [image] Nate Dhaliwal: const json = await response.json(); this await is unnecessary. the response should already be an object so not sure why you need the .json() etc. ? You can probably simplify this a lot [image] Nate Dhaliwal: this.updateBothBannersVisibility(this.annsDataFinal); you don’t need to pass this as the tracked variables are in scope throughout the Component, so just call it and refer to it in the action. Some style tips: don’t smother your shared code with console.logs, that makes it harder to see the wood for the trees use two space indentation not 4 which is a discourse standard. See your template consider moving this into a dedicated .gjs file you can click on the numbers in github and get a shareable link which previews the code if you need. advanced: set up Prettier and ESlint … the former for style and the latter for both style and it might help you catch some bugs.

[image] Robert: set up Prettier and ESlint … the former for style and the latter for both style and it might help you catch some bugs. It’s not this, is it? [image] Automatically lint and format code before commits Developer Guides Discourse uses lefthook for git hooks, and bin/lint as the main CLI entry point for running the same checks manually. If you are working in a local clone, install the hooks once: pnpm install pnpm lefthook install After that, staged files will be checked automatically on git commit. The main command: bin/lint Use bin/lint when you want to run the repo’s configured linters yourself instead of waiting for the pre-commit hook. Common examples: bin/lint bin/lint path/to/file.rb path/to/file.gj…

You don’t need to go that far but that’s an option. It’s enough to do it manually at first.

[image] Nate Dhaliwal: {{#if this.annsData.visible}} This kind of thing probably doesn’t work. I don’t think EmberJS will watch nested properties. You should create, track and test properties at the same level. So create a tracked property called say annsDataVisible, update its value and use that in your if statement.

You can also reassign the entire object each time instead of just a value of a child attribute which might trigger a repaint.

Two tracked variables not updating

Development

NateDhaliwal (Nate Dhaliwal) February 3, 2025, 7:04am 5

It’s not this, is it?

Topic		Replies	Views
Tracked variable not found? Development	5	226	June 20, 2025
Another way to track nested data structures Development plugin-api , rest-api	2	167	March 19, 2025
Problem tracking nested structure Development	6	261	August 9, 2024
Live updates of components Development	1	124	July 24, 2024
Glimmer Component Change Detection Not Working - Mutating Properties in @tracked Array Development	5	304	August 14, 2025

Two tracked variables not updating

Related topics