How to load html page data without opening the page?

Ionic Framework
1

Hello,
I am working with tabs. I am using weather API.
On the TAB1, I am loading current weather data.
On the TAB2, I am loading forecast data. This is happening in the shared services.
So I can call the API once and get all this data I need.

    The CODE: 

 **let row = document.querySelector(".card");**
         **row.innerHTML** = data['forecast']['forecastday']
           .map((day) => {
            this.fcondition = day['day']['condition']['text']
            this.html = `<ion-card>
           <ion-card-content >
               <ion-item>${this.fcondition}</ion-item>
           </ion-card-content>
           </ion-card>`;

            return this.html;
          }).join(' ');

The problem:

The HTML element (".card") is in the TAB2. And it is not loaded when I open the app on TAB1 ofcs.
So when the row.innerHTML happens the (".card") is still undefined. For this to work I first have to open the TAB2, then go back to TAB1, do my search and the data loads into the .card element just okay.
Can smbd help me please? How can I load the HTML data for TAB2 without going there first

This is the HTML for TAB2

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      FORECAST
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="card"></div>
</ion-content>
2

This class of problem is more or less why webapp frameworks like Angular, React, and Vue exist. Are you categorically opposed to using one?

3

How did you guess? :smiley: u magician. I do not work with frameworks much.
Okay, anyway in this case I think it is better to call the weather API only once, because why call it two times when I have the information I need in the first call.
And second I do not want endless scrolling all in one page. If the user wants to see the forecast then fine it is there. If not then it is not populating the first page.
So do you think there is a solution to my problem ? :slight_smile:
Because so far I did it as ugly as it gets and I redirect the user to TAB2 and immediately back to TAB1. And I hate it. Haaaate it. HATE IT.

4

There probably is a solution to your problem, but you’ll just hit another one later on that is close enough that you’ll try to reuse this solution, but not quite close enough for it to really work. So you’ll end up writing a layer of abstraction that will deal with more general cases. At which point you will have effectively written a portion of your own framework.

If you’re anything like me, at this point you will take a good long look in the mirror and decide that it is probably a far better use of everybody’s time and effort to study an existing framework. I picked Angular.

Incidentally, using Angular, what you ask is incredibly simple. See chapter 4 of the Tour of Heroes for how one would write this.

5

Thank you so much for your answer! I appreciate it very much.
I am not sure the Heroes would help me.
From what I understand it is a service for sharing data in all the tabs it is injected into, correct?
Thanks to heroes I can access the data from anywhere. And for this, I have shared.services.ts in which is this code written. So I do can access the data from any tab. But I cannot push the data to the (’.card’) class element because the shared.services cannot see the element. It is not yet loaded.
What’s your take on this?
I want to populate the Tab2 page element with data I have and can be shared. When I visit the Tab2 page then go back to Tab1 and do my search for weather data in the location it will show the current data in Tab1 and simultaneously populate the Tab2 page with forecast data correctly.
I hope I expressed myself correctly. :confused: :confused: :confused:

6

Yes, and if you always expose things as Observables from your services, then whenever new data comes from anywhere, be it the backend or an update from another page in your app, all clients get the freshest information with no further work by you.

You don’t want to push the data to the .card element, because that’s backwards. You want the component backing the relevant HTML page to register itself as a consumer of the forecast data. One of the most fundamental concepts in Angular is property binding. You have a backing component (written in TypeScript) that exposes properties like forecast, and then templates that render that data. As in the Tour of Heroes tutorial, when services provide updates to components that subscribe to their Observables, framework change detection “knows” that the data has changed and propagates the updates, again with absolutely zero further effort on your part.

Backtrack to Chapter 3, in which they build the HeroDetail component. Imagine that a Hero maps to your Forecast, and I think the structure of that tutorial app maps very closely to what you are trying to achieve here.

7

Okay, I am so so thankful for your answers. But I am Dense with capital D I guess.
Do you feel like helping me out on skype maybe?
Yes, I am kinda desperate. If not then thank you so so much for all your help and quick answers. You are awesome!