I'm creating a web site to add statistics from multiple games. The first part reads json files which contain the stats (multiple files per game) and populates an HTML select element for the user to select which games to include in the stats (allowing user to select multiple games). It's working in Chrome and Edge on my computers, but in Safari (iPhone) only one of the games shows as an option (the 4th of 5 games). Below is the function to read the files. Why would this not be working in Safari? I'm not sure if it has to do with the await / async or something else.
jsonFiles = ['file1.json', 'file2.json', 'file3.json'];
async function readGames() {
let games = {};
for (let file of jsonFiles) {
let playlist;
let gameDate;
let response = await fetch(file);
let data = await response.json();
playlist = data.playlist;
gameDate = (new Date(playlist.slice(playlist.indexOf('(')+1, playlist.indexOf(')'))).getTime())/10000;
if (!(gameDate in games)) games[gameDate] = playlist;
}
//Remove previous options in the select element
while(gamesSelect.firstChild) {
gamesSelect.removeChild(gamesSelect.firstChild);
}
const gameValues = Object.values(games);
for (let game of gameValues) {
let option = document.createElement('option');
option.setAttribute("value", game);
option.innerHTML = game;
gamesSelect.append(option);
}
}