0

I am making an app that should display live soccer data. For the back end, I get my data from an API and want to place this in Firebase's real-time database to allow for live data in the app. The data from the API already comes as JSON, so is there any way to utilize this?

The top level of the real-time database should be dates from a fixed interval, and under each date, I want to nest the JSON data from the API.

Below is how I am currently trying to insert into the real-time database using the set() method, though, nothing happens in its current state.

import { initializeApp } from "firebase/app";
import { getDatabase, ref, set } from "firebase/database";
import { getDates } from './dates.js';
import { getDataApi, getCurrentSeason } from './api_manager.js';
import { idList } from '../data/data.js';

const firebaseConfig = {
...
};

const app = initializeApp(firebaseConfig);
const db = getDatabase();

function update() {
    var startDate = new Date();
    var season = getCurrentSeason().then(val => val);
    var datesArr = getDates(startDate, 7);

    datesArr.forEach(date => {
        idList.forEach(id => {
            const reference = ref(db, `${date}/${id}`);
            var data = getDataApi(date, id, season);
            set(reference, data);
        });
    });
}

update();

If it's of any interest, these are my methods for fetching the data from the API:

import fetch from 'node-fetch';

const options = {
  method: 'GET',
  headers: {
    ...
  }
};

export async function getDataApi(date, leagueId, season) {
    const url = `https://api-football-v1.p.rapidapi.com/v3/fixtures?date=${date}&league=${leagueId}&season=${season}`;

    try {
        let response = await fetch(url, options);
        let json = await response.json();
        return json['response'];
    } catch (error) {
        console.log("Error: " + error);
    }
}

export async function getCurrentSeason() {
    const url = 'https://api-football-v1.p.rapidapi.com/v3/leagues?id=39&current=true';
    try {
        let response = await fetch(url, options);
        let json = await response.json();
        return json['response'][0]['seasons'][0]['year'];
    } catch (error) {
        console.log("Error: " + error);
    }

}
bragi
  • 183
  • 2
  • 12
  • "nothing happens" is really hard to help with. Did you already debug the problem locally? If you set a breakpoint on each line of the code you shared, run the code in a debugger, and then check the value of each variable on each line, which is the **first** line that doesn't do what you expect it to do? – Frank van Puffelen Nov 29 '22 at 18:53

1 Answers1

1

Your getCurrentSeason and getDataApi functions are marked as async, yet you're not using await when calling them. Even the one then() call you have won't work, as all code that needs the value would have to be inside that then() callback.

A simple approach:

async function update() {
    var startDate = new Date();
    var season = await getCurrentSeason(); // 
    var datesArr = getDates(startDate, 7);

    datesArr.forEach(date => {
        idList.forEach(id => {
            const reference = ref(db, `${date}/${id}`);
            var data = await getDataApi(date, id, season); // 
            set(reference, data);
        });
    });
}

Note that this code will still continue to run after your update(); call returns, so check if your process is terminated prematurely.

In general, I recommend reading up on asynchronous operations in JavaScript, as you'll keep encountering that. Some more good sources for that:

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Ah, that makes a lot of sense, thanks! When I run update() now, it looks like it starts filling my real-time database, but then for some reason deletes it all again. Any idea what could cause this? Could you explain further what you mean by the process terminating prematurely? Adding a 'return;' to update() doesn't change anything in terms of what I explained above (starts inserting, then deletes). – bragi Nov 29 '22 at 19:11
  • I don't know what might cause that delete, but it sounds like something where you should set breakpoints, run in a debugger, and check which line (and values) cause that. --- Similarly, if you run in a debugger or add some logging, you'll notice that the `update` function returns before all the reads and writes are finished. I have no idea how you execute that call and if the context it runs in waits for it to complete. If not, you may need to wait for all asynchronous operations in `update` to complete with `Promise.all`. – Frank van Puffelen Nov 29 '22 at 19:46
  • All of these are things to read up on and to try. We can't reasonably answer that here for all problems in your original code. The path forward is to read the link I shared and more on asynchronous programming in JavaScript (e.g. https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call), and to apply that to your problem further yourself. I added some more links to my answer. --- – Frank van Puffelen Nov 29 '22 at 19:47