Как я могу получить свой код для создания таблицы, отображающей информацию из документа листов Google, с использованием ⇐ CSS

[Anonymous]

В настоящее время у меня возникла проблема с моим js-кодом. Я пытаюсь использовать документ Googlesheets для создания таблицы лидеров на своем веб-сайте. Я работаю над университетским проектом, в котором отображается система таблицы лидеров киберспорта с использование js.

Код: Выделить всё

    

Esports Leaderboard
[list]


[/list]

Вот его HTML-код: это пустой ul, которому присвоены свойства CSS, и я хочу, чтобы таблица лидеров вводилась динамически с помощью моего скрипта.

Код: Выделить всё

#leaderboard {
max-width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

#leaderboard h2 {
text-align: center;
}

#leaderboard ul {
list-style-type: none;
padding: 0;
}

#leaderboard li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}

#leaderboard li:nth-child(even) {
background-color: #f9f9f9;
}

#leaderboard .username {
flex-grow: 1;
}

Наконец, вот сценарий, который я использую, я вставил туда свой ключ API, а также заданы соответствующий идентификатор листа и диапазон, в котором установлены данные, которые необходимо получить.

Код: Выделить всё

// Function to load Google Sheets API
function loadSheetsAPI() {
gapi.load('client', function() {
gapi.client.init({
'apiKey': 'key'
}).then(function() {
fetchData();
}).catch(function(error) {
console.error('Error initializing Google Sheets API:', error);
});
});
}

// Load Google Sheets API with a delay
setTimeout(loadSheetsAPI, 1000); // Adjust the delay time as needed (in milliseconds)

// Function to fetch data from Google Sheets
function fetchData() {
if (!gapi.client.sheets) {
console.error('Google Sheets API is not loaded or initialized.');
return;
}

gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1HWGVLLX1ugAewLUMAyLxImHo_qeBzam5-Z8RzBpxVBI',
range: 'Sheet1!A1:C21' // Change this to match the range you want to fetch
}).then(function(response) {
var range = response.result;
if (range.values && range.values.length > 0) {
displayData(range.values);
} else {
console.log('No data found in the specified range.');
}
}).catch(function(error) {
console.error('Error fetching data from Google Sheets:', error);
});
}

// Function to display data in HTML
function displayData(data) {
var leaderboardDiv = document.getElementById('leaderboard');
var leaderboardList = document.getElementById('leaderboard-list');

leaderboardDiv.innerHTML = 'Leaderboard';
leaderboardList.innerHTML = '';

for (var i = 0; i < data.length; i++) {
var listItem = document.createElement('li');
listItem.textContent = data[i].join(' | ');
leaderboardList.appendChild(listItem);
}
}

// Load Google Sheets API
loadSheetsAPI();

Однако ничего не работает, каждое изменение, которое я пытаюсь внести, по-прежнему не отображается на веб-сайте, и у меня сжатые сроки, так как оно не будет запущено, поскольку оно предназначено только для университетский проект, я пытался завершить его только с помощью внешнего кода.
Я пробовал много вещей, но, похоже, у меня ничего не получилось, я смотрел на YouTube видео по этому поводу, даже использовал ChatGPT, но и это не работает.

Подробнее здесь: https://stackoverflow.com/questions/782 ... -google-sh