How to Pass API Values to a Selected Component in GrapesJS Editor

[AgnRakul]

I'm working on a project where I need to make an API call and pass the status from that call to a selected component in the GrapesJS editor.

Current Approach
I'm trying to update a selected component with data from an API call. Here's the current code I'm working with:

fetch('https://api.example.com/status')
  .then(response => response.json())
  .then(data => {
    // Assuming the API returns a status field
    const status = data.status;
    
    // Get the GrapesJS editor instance
    const editor = grapesjs.getEditor();
    
    // Get the selected component
    const selectedComponent = editor.getSelected();
    
    if (selectedComponent) {
      // Update the content of the selected component
      selectedComponent.set('callstatus', status);
    } else {
      console.log('No component selected');
    }
  })
  .catch(error => console.error('Error:', error));

Is this the correct way to update a selected component with external data in GrapesJS?

Are there any best practices or alternative methods for integrating external API data with specific components in GrapesJS?

@artf

[andrescevp]

You should this in the component itself