函数外部无法引用对象数组，JSON加载数据无法在loadJSON函数外使用

Hey there! Let’s break down and fix those two frustrating issues you’re dealing with—they boil down to variable scope and asynchronous code behavior:

1. Making the Object Array Accessible Outside the Function #

The core problem here is variable scope: if you declare your points array inside the loadJSON function, it’s trapped in that function’s local scope and can’t be accessed from outside.

To fix this, declare the array in a higher scope (like the global scope, or a module scope if you’re using ES modules) so it’s available everywhere you need it:

// Declare the array in a scope accessible to all relevant functions
let points = [];

function loadJSON() {
  $.getJSON('lib/js/data/brand.json', function(data) {
    // Clear the array first to avoid duplicate data if you re-run loadJSON
    points = [];
    for (var j = 0; j < data[0].locations.length; j++) {
      var point = {};
      point.id = (data[0].locations[j].brand) + j;
      point.lat = (data[0].locations[j].lat);
      point.long = (data[0].locations[j].long);
      // Push the new point into the globally accessible array
      points.push(point);
    }
    // Note: The array is populated here, but there's still an async catch below!
  });
}

2. Handling Asynchronous Data Loading #

Even with the global array, you might still see it as empty if you try to use it right after calling loadJSON(). That’s because $.getJSON runs asynchronously: it sends the request for the JSON file and moves on to the next line of code, without waiting for the data to come back from the server.

For example, this won’t work as expected:

loadJSON();
console.log(points); // Will log an empty array—data hasn't loaded yet!

You need to run your code only after the JSON has loaded and the array is populated. Here are two reliable solutions:

Option 1: Use a Callback Function #

Pass a function to loadJSON that triggers once the data is ready:

let points = [];

function loadJSON(callback) {
  $.getJSON('lib/js/data/brand.json', function(data) {
    points = [];
    for (var j = 0; j < data[0].locations.length; j++) {
      var point = {};
      point.id = (data[0].locations[j].brand) + j;
      point.lat = (data[0].locations[j].lat);
      point.long = (data[0].locations[j].long);
      points.push(point);
    }
    // Run the callback function once the array is fully populated
    if (typeof callback === 'function') {
      callback(points);
    }
  });
}

// Usage:
loadJSON(function(loadedPoints) {
  console.log('Data is ready!', loadedPoints);
  // Put all code that needs the points array right here
});

Option 2: Use Promises (Modern, Cleaner Approach) #

Wrap the $.getJSON call in a Promise, which makes asynchronous code easier to manage (especially with async/await):

let points = [];

function loadJSON() {
  return new Promise((resolve, reject) => {
    $.getJSON('lib/js/data/brand.json', function(data) {
      points = [];
      for (var j = 0; j < data[0].locations.length; j++) {
        var point = {};
        point.id = (data[0].locations[j].brand) + j;
        point.lat = (data[0].locations[j].lat);
        point.long = (data[0].locations[j].long);
        points.push(point);
      }
      resolve(points); // Signal that the data is ready
    }).fail(function(error) {
      reject(error); // Handle errors if the JSON fails to load
    });
  });
}

// Usage with async/await:
async function init() {
  try {
    const loadedPoints = await loadJSON();
    console.log('Data is ready!', loadedPoints);
    // Use the points array for your map/visualization logic here
  } catch (error) {
    console.error('Failed to load location data:', error);
  }
}

// Start the process by calling init()
init();

Quick Recap #

• Scope Rule: Variables declared inside a function are local to that function unless you declare them in a higher scope.
• Async Rule: Functions like $.getJSON don’t pause execution—always use callbacks, Promises, or async/await to run code after data finishes loading.

内容的提问来源于stack exchange，提问作者d_bernstein