document.addEventListener(‘DOMContentLoaded’, (event) => {
const dataFields = [
{ id: ‘data-field-1’, url: ‘api/data-source-1.json’ },
{ id: ‘data-field-2’, url: ‘api/data-source-2.json’ },
{ id: ‘data-field-3’, url: ‘api/data-source-3.json’ },
{ id: ‘data-field-4’, url: ‘api/data-source-4.json’ },
{ id: ‘data-field-5’, url: ‘api/data-source-5.json’ },
{ id: ‘data-field-6’, url: ‘api/data-source-6.json’ }
];

dataFields.forEach(field => {
fetchData(field);
});

async function fetchData(field) {
try {
const response = await fetch(field.url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// Here, we’re assuming the API returns a ‘value’ field. Adjust according to your API’s response structure.
document.getElementById(field.id).textContent = data.value || ‘No data’;
} catch (error) {
document.getElementById(field.id).textContent = ‘Error loading data’;
console.error(‘Error:’, error);
}
}
});