AngularJS报错：Cannot read property 'length' of undefined 求助

Hey there, sorry to hear you've been stuck on this all day—let's get this sorted out for you! That error usually pops up when you're trying to access the length property on something that's not an array (or doesn't exist yet), so let's break down the likely causes and fixes based on your scenario.

Common Causes & Fixes #

1. Async Data Loading Race Condition #

The biggest culprit here is probably that your filter logic is running before the JSON data finishes loading. Since $http.get() is asynchronous, your code might be trying to filter $scope.products before it's actually been populated with data from the file.

Wrong Approach (What You Might Be Doing)

// Starts the async request but doesn't wait for it to finish
$http.get('products.json').then(function(response) {
  $scope.products = response.data;
});

// This runs immediately—$scope.products is still undefined here!
var specialOffers = $scope.products.filter(product => product.category === 'special offers');
var randomIndex = randomInt(0, specialOffers.length - 1); // Boom, error hits

Correct Approach (Wait for Data to Load)

Move all your filtering and randomInt logic inside the then callback so it only runs once the JSON data is ready:

$http.get('products.json').then(function(response) {
  $scope.products = response.data;
  
  // Now we know $scope.products exists—filter away!
  var specialOffers = $scope.products.filter(product => {
    return product.category === 'special offers';
  });
  
  // Add a check to handle cases where there are no special offers
  if (specialOffers.length > 0) {
    var randomIndex = randomInt(0, specialOffers.length - 1);
    // Do something with your random index here
  } else {
    console.log("No products found in 'special offers' category!");
  }
});

2. Verify Your JSON Data Format #

Double-check that your .json file is returning an array of objects, not a single object or invalid JSON. If $scope.products ends up being an object instead of an array, the filter method won't exist, and specialOffers will be undefined.

Example of valid JSON structure:

[
  {"id": 1, "category": "special offers", "name": "Product A"},
  {"id": 2, "category": "regular", "name": "Product B"}
]

3. Handle Empty Filter Results #

Even if $scope.products is an array, if none of the items match the 'special offers' category, filter() will return an empty array (not undefined). But if your randomInt function can't handle a range like 0 - -1 (when length is 0), you'll still run into issues. Adding the length > 0 check we included earlier prevents that.

Quick Debugging Tips #

• Add console.log($scope.products) right before your filter line to see what's actually in it—this will tell you if it's undefined, an array, or something else.
• Check your browser's Network tab to confirm the JSON file is loading successfully and returning the correct data.

Hope this gets you un-stuck! Let me know if you need to tweak any part of this for your specific code.

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