How to set values for multiple global variables using JavaScript efficiently

Other Questions JavaScript
1

I’m working with jQuery and need to populate several global variables with data from AJAX requests. Right now I’m making separate calls for each variable which feels repetitive:

$.get("api/fetch.php?section=dashboard", function(response)
    {dashboard = response;});
$.get("api/fetch.php?section=users", function(response)
    {users = response;});
$.get("api/fetch.php?section=products", function(response)
    {products = response;});
$.get("api/fetch.php?section=orders", function(response)
    {orders = response;});
$.get("api/fetch.php?section=settings", function(response)
    {settings = response;});

This approach works but violates DRY principles since I’m repeating the same pattern. What’s the best way to refactor this code to be more maintainable? Should I use an array or object to store these values instead?

2

Been there, done that. You’re totally right about the DRY violation. I wrote code like this constantly until I saw how messy it gets when you need error handling or coordination between calls.

Here’s a cleaner approach with Promise.all:

const sections = ['dashboard', 'users', 'products', 'orders', 'settings'];
const promises = sections.map(section => 
    $.get(`api/fetch.php?section=${section}`)
);

Promise.all(promises).then(responses => {
    [dashboard, users, products, orders, settings] = responses;
});

Honestly though, after dealing with similar data fetching in production, I’d step back and use a proper automation platform instead of building your own.

I’ve moved most of my data orchestration to Latenode since it handles API calls, error handling, and data transformation without repetitive code. You can set up workflows that fetch from multiple endpoints, merge data, and cache results automatically.

The visual workflow builder makes complex data flows way easier to manage, and you don’t deal with promise chains or error handling anymore. Scales better when you add more data sources too.

3

Had this exact problem rebuilding our company’s admin panel. Sequential AJAX calls killed performance - each request waited for the previous one to finish. I combined all sections into one API endpoint that takes multiple parameters. Modified the backend to handle api/fetch.php?sections=dashboard,users,products,orders,settings and return everything as JSON. javascript function fetchAllData() { const sections = ['dashboard', 'users', 'products', 'orders', 'settings']; return $.get('api/fetch.php', { sections: sections.join(',') }) .then(data => { window.dashboard = data.dashboard; window.users = data.users; window.products = data.products; window.orders = data.orders; window.settings = data.settings; }); } Loading time dropped from 800ms to 200ms. One HTTP request instead of five. Error handling’s way simpler too - just catch failures in one spot.

4

I encountered this challenge while building a dashboard last year, and those repetitive AJAX calls quickly became a maintenance headache, especially when it came to implementing loading states and error management.

What really streamlined my process was creating a single function that manages all data fetching, populating a single object instead of scattering global variables around:

function loadAppData() {
  const sections = ['dashboard', 'users', 'products', 'orders', 'settings'];
  const appData = {};
  
  sections.forEach(section => {
    $.get(`api/fetch.php?section=${section}`)
      .done(response => {
        appData[section] = response;
      })
      .fail(error => {
        console.error(`Failed to load ${section}:`, error);
        appData[section] = null;
      });
  });
  
  return appData;
}

This approach eliminated the repetitive code and simplified error handling. Managing one centralized data object is far superior to juggling multiple global variables, making it significantly easier to debug and expand when new sections are added.

5

honestly just use async/await with a simple loop - way cleaner than promise.all imo. something like const data = {}; for(let section of sections) { data[section] = await $.get(...) } keeps it readable and you can add error handling per section easily