I'm very bad at JS. I've looked at the mail modules systray icons javascript and template files. I've read the javascript cheetsheet and referance documentation but I cannot get it to work.

I want to gave a systray icon that shows a number same as the mail systray icons and when you click on it, a div with the message apears. The number and message need to be gotten from a models method. This means that I've got a problem with asynchronous promise function. The custom module returns json dump of a dict

JS Code:

odoo.define('odoo13_demo_timer.DemoDays', function (require) {
    'use strict';

    var core = require('web.core');
    var session = require('web.session');
    var SystrayMenu = require('web.SystrayMenu');
    var Widget = require('web.Widget');
    var Qweb = core.qweb;

    var DemoDays = Widget.extend({
        name: 'demo_days_menu',
        template: 'odoo13_demo_timer.DemoDays',
        events: {
            'show.bs.dropdown': '_onDemoDaysShow',
            'hide.bs.dropdown': '_onDemoDaysHide',
        },
        start: function() {
            this._getDemoDaysData();
            return this._super();
        },
        _getDemoDaysData: function() {
            var self = this;

            return self._rpc({
                model: 'demo.installation',
                method: 'get_systray_dict',
                args: [],
                kwargs: {context: session.user_context},
            }).then(function (data) {
                self.demo_days_data = data;
                self.$('.o_demo_days_counter').addClass(data.message_class);
                self.$('.o_demo_days_counter').text(data.expires);
                self.$('.demo_days_message').append(data.message);
            });
        },
        _onDemoDaysShow: function () {
            document.body.classList.add('modal-open');
        },
        _onDemoDaysHide: function () {
            document.body.classList.remove('modal-open');
        },
    });
    DemoDays.prototype.sequence = 100;
    SystrayMenu.Items.push(DemoDays);

    return DemoDays;
});

Template:

<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-name="odoo13_demo_timer.DemoDays">
        <li class="o_timer_systray_item">
            <a class="dropdown-toggle o-no-caret" data-toggle="dropdown" data-display="static" aria-expanded="false" title="Demo Days" href="#" role="button">
                <i class="fa fa-history" role="img" aria-label="Demo Days"/> <span class="o_demo_days_counter badge badge-pill"/>
            </a>
            <div class="o_demo_days_systray_dropdown dropdown-menu dropdown-menu-right">
                <span class="demo_days_message"/>
            </div>
        </li>
    </t>
</templates>

If I hard code the number and message in the start function it works. Getting the data from the model doesn't work. I wasted hours with trying different things but I just cannot get it  to work.

start: function() {
    this.$('.o_demo_days_counter').addClass('green');
    this.$('.o_demo_days_counter').text('15');
    this.$('.demo_days_message').append('some text for message');
},

Can someone help?  

EDIT:

The data is now accessible, when I updated the code with the answer for promise. But it still does not show the data!? Really need help with this.