Uncaught TypeError: Cannot read properties of undefined while looping objects

So , I have 2 objects that are made of products , the main and the secondary , i have made a loop that searches in the main , and if it does not find the product , it deletes is from the secondary, Even though , with 10 products it worked, now that i have 1470 products the loop stops on the 4th repeat and says << Uncaught TypeError: Cannot read properties of undefined (reading ‘name’) >> , Here is the code

function deleter(){
        let main = main_products;
        let secondary= secondary_products;
        let i;
        let counter = 0;
        console.log(main);
        console.log(secondary); // just to be sure the data is ok 
        for (i=0;i<1550;i++){
            counter = 0;
            while (secondary[i].name !== main[counter].name){
                counter ++;
                if (counter === 1550){
                    break ;
                } // i did this with break i dont know why i did though 
            }
            if (secondary[i].name === main[counter].name){
                console.log("found  -> " + secondary[i].name);
            }
            else {
                console.log("did not find product -> "+ secondary[i].name +" on the main database . . .  ");console.log("initializing product deletion . . .");
                console.log(secondary[i].id);
                deletedata();
                document.getElementById("delete").innerHTML = "Done ✔️";
            }
        }

    }

when i loop 10 products it works fine every time . Do i need to do something else now that the products are significantly more?

Edit

So the objects are made like this and i take the from woocommerce

[ { “id”: 67537, “name”: “test 10”, “slug”: “”, “type”: “simple”, “status”: “draft”, “featured”: false, “catalog_visibility”: “visible”, “description”: “

allagi

n”, “short_description”: “”, “sku”: “1230975071-1-1-1-1-1-1-1-1-1”, “price”: “123122”, “regular_price”: “123123”, “sale_price”: “123122” } { “id”: 67536, “name”: “test 9”, “slug”: “”, “type”: “simple”, “status”: “draft”, “featured”: false, “catalog_visibility”: “visible”, “description”: “

allagi

n”, “short_description”: “”, “sku”: “1230975071-2”, “price”: “123122”, “regular_price”: “123123”, “sale_price”: “123122”}]

Here is a picture

both objects are from woo

Answer

The problem is – you are running out of the bounds of you product array. It’s caused by:

1. You have 1470 products, but iterating over 1550 for (i = 0; i < 1550; i++). Can be fixed with for (i = 0; i < secondary.length; i++)
2. No additional checks do we have next element or not in while loop

So I suppose fixed and optimized version of code may look like this:

  const main_products = [{id: 1, name: 'blabla1'}, {id: 2, name: 'blabla2'}, {id: 3, name: 'blabla3'}];
  const secondary_products = [{id: 2, name: 'blabla2'}, {id: 4, name: 'blabla4'}, {id: 5, name: 'blabla5'}];
  deleter();

  function deleter() {
    let main = main_products;
    let secondary = secondary_products;

    for (let i = 0; i < secondary.length; i++) {
      const productWeFound = main.find((product) => secondary[i].name === product.name);

      if (productWeFound) {
        console.log("found  -> " + secondary[i].name);
      } else {
        console.log("did not find product -> " + secondary[i].name + " on the main database . . .  ");
        console.log("initializing product deletion . . .");
        console.log(secondary[i].id);
        // deletedata();
        // document.getElementById("delete").innerHTML = "Done ✔️";
      }
    }
  }