Unable to display Platform Event Data with LWC HTML

Question

I am running into an issue where I can not display platform event data in my LWC HTML. I am able to store the data in a variable and able to display it to the console.

Javascript

import { LightningElement, track, wire } from "lwc";
import { CurrentPageReference } from "lightning/navigation";
import { registerListener, unregisterAllListeners } from "c/pubsub";
import { subscribe } from "lightning/empApi";

export default class SurveyTranslationTracking extends LightningElement {
  @track submittedSurveys = [];
  @track showSurveys = false;
  @track sentDate;
  @track surveyData;
  @track channelName = "/event/SurveyTranslation__e";

  connectedCallback() {
    registerListener("surveysubmitevent", this.handleSurveySubmit, this);

    let date = new Date();
    this.sentDate = `${
      date.getMonth() + 1
    }/${date.getDate()}/${date.getFullYear()}`;

    //function that runs when a new event message is received
    const messageCallback = function (response) {
      console.log(`the pe has pushed`);
      //returns the payload in the surveyData
      this.surveyData = JSON.stringify(response.data.payload);
      console.log(`json platform event data ${JSON.stringify(this.surveyData)}`);
    };

    subscribe(this.channelName, -1, messageCallback).then((response) => {
      this.showSurveys = true;
      console.log(response);
    });
  }

Relevent HTML

<lightning-layout horizontal-align="center">
      <lightning-layout-item padding="around-small" size="6">
        <template if:true={showSurveys}>
          <h1 class="slds-align_absolute-center slds-text-title_bold">
            Submitted Surveys
          </h1>
          <template for:each={surveyData} for:item="survey">
            <div key={survey.SurveyId__c}>
              <c-submitted-survey-data
                survey-name={survey.SurveyLanguage__c}
                version-type={survey.SurveyVersionlabel__c}
                submitted-date={survey.CreatedDate}
              >
              </c-submitted-survey-data>
            </div>
          </template>
        </template>
      </lightning-layout-item>
    </lightning-layout>

Additionally, are platform events ephemeral? What would be the best way to constantly show the relevent event information. With this current strategy, I believe the platform event data does not show HTML if a refresh occurs?

Answer 1

To receive and publish events, use the lightning-emp-api module. It provides all the methods you need to work with Platform Events