It seems that the maximum call stack size has been exceeded, resulting in a

Question

It seems that the maximum call stack size has been exceeded, resulting in a

Within this dropdown, I have incorporated a checkbox containing values in the form of an object. (refer to attached image)

Every time I make a selection from the dropdown, there is a watch function that updates this new value, which is essentially an array of selected objects, and then passes it on to another object for display within a directive called "tiles".

$scope.$watch('skills', function(newVal, oldVal) {
        if (newVal) {
            console.log('changed!!! old value: ' + oldVal + '  new val  ' + newVal);
            if (newVal === undefined) {
                return;
            }
            $scope.tiles = _.cloneDeep(newVal);
        }
    }, true);



angular.module('dsadad')
    .component('tiles', {
        templateUrl: 'tile.tpl.html',
        bindings: {
            tiles: '<',
            onDelete: '&?'
        },
        controller: function ($state, _, $scope, $log, Utils, $translate, moment) {
            'use strict';

            var $ctrl = this;

        }
    });

https://i.sstatic.net/SzA74.png I am encountering a rangeError stating "Maximum call stack size exceeded."

It seems like one of the values in the array of selected objects has been mistakenly assigned as an array instead of an object, resulting in this issue.

https://i.sstatic.net/2hoXP.png

javascript angularjs

Answer 1

Answer №1

Your problem likely lies with this line of code:

$scope.tiles = _.cloneDeep(newVal);

If the variable newVal contains a reference to itself, it can create an infinite loop and result in a stack overflow error.

For example, you might have a circular object structure like:

const objectB = {
  id: 'B',
  otherData: null;
};
const objectA = {
  id: 'A',
  otherData: objectB;
};
objectB.otherData = objectA;
_.deepClone(objectB) // This will fail due to the circular reference

Alternatively, the issue could be caused by newVal being nested too deeply within objects.

const objectA = {
  a: {
    b: {
      c: {
        // etc. etc.
      }
    },
  }
};

To resolve this problem, you can eliminate any circular references in your data structure, or consider using a shallow copy like {...newVal} if it better suits your data requirements.

Answer 2

Your problem likely lies with this line of code:

$scope.tiles = _.cloneDeep(newVal);

If the variable newVal contains a reference to itself, it can create an infinite loop and result in a stack overflow error.

For example, you might have a circular object structure like:

const objectB = {
  id: 'B',
  otherData: null;
};
const objectA = {
  id: 'A',
  otherData: objectB;
};
objectB.otherData = objectA;
_.deepClone(objectB) // This will fail due to the circular reference

Alternatively, the issue could be caused by newVal being nested too deeply within objects.

const objectA = {
  a: {
    b: {
      c: {
        // etc. etc.
      }
    },
  }
};

To resolve this problem, you can eliminate any circular references in your data structure, or consider using a shallow copy like {...newVal} if it better suits your data requirements.

It seems that the maximum call stack size has been exceeded, resulting in a

Answer №1

Similar questions

Deliver feedback from NodeJS Server to JavaScript on the client side

Having trouble getting the jQuery slider to function properly within an AngularJS environment

Using Selenium WebDriver and JavaScript: Enabling Chrome to Download Multiple Files at Once

"Efficiently handle multiple instances of the same name using AJAX, JavaScript

What causes the variance in outcomes between employing a literal string versus a local variable?

Understanding the scope of variables in HTML files, JavaScript files, and PHP files when echoing statements

Using Angular's ng-repeat alongside a bootstrap input checkbox, make sure to incorporate a dynamic ng-model and utilize ng-

Neglecting a light source in the Three.js framework

Ways to effectively manage multiple asynchronous operations while retrieving emails and attachments using IMAP and JavaScript

Having trouble dynamically adding HTML elements in JQuery

Leveraging ng-model with expressions in ng-repeat in AngularJS.Would you

Having trouble exporting an object from a different JavaScript file in Node.js

Is there a way to specifically call the last promise in a loop?

What is the best way to transfer an array from an Express Server to an AJAX response?

What methods can I use to get my kahoot botter to produce unpredictable answers?

Is there a method to avoid redeclaring variables in JavaScript with jQuery?

What steps do I need to take in order to create a histogram with perfect symmetry?

Are there any lodash functions available for removing an array that matches another array from the main array?

What is the best way to halt all active Ajax requests initiated by a DataTables instance?

When a page is changed, the Vue.js Active Menu color remains enabled