How to add content that is coming from an AJAX call

Ionic version: 6.18.2
Framework: Ionic React

I’m struggling to make an AJAX call work. How can I add content that is coming from an AJAX call with Ionic React?

Here is my AJAX call to get content from another website:

  $.ajax({
    method: "GET",
    url: "https://www.my-website.ch/api/data"
  })
  .done(function( content ) {
    console.log(content)
  });

Since this is an AJAX call, the content is not immediately available. What I usually do is to append the incoming content to a class, like this:

  <div className="target">
  </div>
  {get_items()}

function get_items(){
  $.ajax({
  method: "GET",
  url: "https://www.my-website.ch/api/data"
})
  .done(function( content ) {
    console.log(content)

    $(".target").append(
      `
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle></IonCardSubtitle>
          <IonCardTitle className="ion-text-center">${content[0].name}</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
        <div className="center">
          ${content[0].company}
          </div>
      </IonCardContent>
      </IonCard>
      `
    );

  });
}

But if I do it this way, the components are not rendered correctly. Only the text itself is appended, but not the IonCard with its styling. Also, the text gets appended twice, not once.

I believe that the text gets appended twice, because there is a shadow-root where there is another div with the class “target”. I think that my usual approach does not work for Ionic Apps.

What is the correct way to do this? How do I add content in Ionic React that is coming from an AJAX call? Or in my case: How do I add another IonCard when the content arrives?

1 post - 1 participant

Read full topic