Auto-update components on pageLoad

[adpce]

Hello.

For context, what I am trying to do is create a blog index page. I am calling an api which returns the titles of blog posts, which I then place in Semantic-UI cards. I have successfully created a component that adds all the blog posts already existing in the system on drop into the canvas (see below), but cannot see how to make this component update itself on changes in api response (i.e. when new blog posts are added).

editor.DomComponents.addType('index', {
model: {
},
  view: {
    onRender() {
        const { $el, model } = this;
        const category = model.get('category');
        $el.empty();
        $.ajax({
          url: '/someurl',
          type: 'get',
          success: function (result) {
            const arr = Object.values(JSON.parse(result));
            var htmlContent = '<div class="ui link cards">';
            arr.forEach((page) => {
              htmlContent += '<div class="card"><a href="' + 'https://myurl.co.uk/' + page.slug + '"><div class="image"></div><div class="content">' + page.browsername + '</div></a></div>';
            });
            htmlContent += '</div>';
            model.append(htmlContent);
          }
        });
      }
    }
});

Sorry about code formatting - don't know how to format code in this context. EDIT: Now I do.

Is there any way to embed this ajax call into the final html, so that the component will regenerate itself on page load with the right information?

Thank you for your time.

[lexoyo]

For code formatting use 3 backticks (`) before and 3 after your code

Why not use listen for the storage load end event and then browse all components and get the ones you need to update then update them?

Or you could listen to the event component:create as I do it here:
https://github.com/silexlabs/grapesjs-symbols/blob/main/src/model/Symbols.ts#L38

[adpce]

So this "problem" was actually me not reading the documentation properly.