Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Question

Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Is there a way to efficiently update an Ember Array so that changes in the array reflect in the view?

Take a look at this simplified code snippet -

cacheArr: Em.A([]),
count: 1,
updateFxn: function() {
    this.incrementProperty(count);
    devObj = Ember.object.create();
    Ember.set(devObj,"ts", this.count);
    this.cacheArr.replace(0,1, [devObj]);
},


App.ArrayComponent = Ember.Component.extend({
  refresh: function() {
    return cacheArr;
  }.property('localModel.length')
});

<script type="text/x-handlebars" id="components/new-comp">
      {{#each item in refresh}}
         {{item.ts}}
      {{/each}}
</script>

I'm puzzled by the exception I encountered: Cannot read property 'destroy' of undefined. Despite my efforts, I haven't been able to find a solution. Any suggestions would be greatly appreciated.

javascript ember.js

Answer 1

Answer №1

Ember keeps track of changes and updates items accordingly when the correct methods are used (such as get/set). When working with arrays, it's important to utilize appropriate setters/getters like pushObject/removeObject/replace/objectAt.

App.IndexController = Em.ArrayController.extend({
  cacheArr: Em.A([]),
  count: 1,
  actions:{
    updateFxn: function(item) {
      this.incrementProperty('count');
      var newColor = {
        color:'newColor', 
        count:this.get('count')
      };
      var index = this.indexOf(item);
      this.replace(index, 1, [newColor]);
    }
  }
});

In creating computed properties, it's essential to have them monitor elements that can impact the outcome of the computed property. Let's analyze the following computed property:

refresh: function() {
  return cacheArr;
}.property('localModel.length')

Let's illustrate this with an example:

// Obtain refresh
var refresh = this.get('refresh');

console.log(refresh);

// Modify localModel to make refresh dirty

this.get('localModel').pushObject({foo:'bar'});

var refresh2 = this.get('refresh');

At this point, both refresh and refresh2 would be identical, since the computed property always returns cacheArr (a global property).

Answer 2

Ember keeps track of changes and updates items accordingly when the correct methods are used (such as get/set). When working with arrays, it's important to utilize appropriate setters/getters like pushObject/removeObject/replace/objectAt.

App.IndexController = Em.ArrayController.extend({
  cacheArr: Em.A([]),
  count: 1,
  actions:{
    updateFxn: function(item) {
      this.incrementProperty('count');
      var newColor = {
        color:'newColor', 
        count:this.get('count')
      };
      var index = this.indexOf(item);
      this.replace(index, 1, [newColor]);
    }
  }
});

In creating computed properties, it's essential to have them monitor elements that can impact the outcome of the computed property. Let's analyze the following computed property:

refresh: function() {
  return cacheArr;
}.property('localModel.length')

Let's illustrate this with an example:

// Obtain refresh
var refresh = this.get('refresh');

console.log(refresh);

// Modify localModel to make refresh dirty

this.get('localModel').pushObject({foo:'bar'});

var refresh2 = this.get('refresh');

At this point, both refresh and refresh2 would be identical, since the computed property always returns cacheArr (a global property).

Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Answer №1

Similar questions

Is there a way to improve error readability in React when using webpack?

Troubles with Installing CRA and NextJS via NPM (Issue: Failure to locate package "@babel/core" on npm registry)

Having trouble with the babel-loader and its version compatibility, as well as not finding the babel-loader folder in the node_modules directory when

Recognizing when a Bootstrap dropdown with multiple options is deselected through Jquery

Issue: Unable to extract the 'title' property from '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is not defined (Next.js Chat App)

Ensuring User Data is Current in the UI with Firebase Auth Callbacks

Repeating the process of running a function multiple times

Issues with PHP not properly accepting JSON data sent via Ajaxor

When the request's credentials mode is set to 'include', the 'Access-Control-Allow-Origin' header in the response should not be using the wildcard '*'

How can we eliminate duplicate arrays of objects within a multi-dimensional array using ReactJS and JavaScript?

Interactive data visualization with hover-over details

Error: Unable to extract the 'id' property from 'this.props.Name' because it is undefined in ReactJS

Troubleshooting: Why the TableTools basic usage example is not functioning as

Transferring Information from Angular Interface to NodeJS through a JSON Document

What sets local Node package installation apart from global installation?

Having trouble with utilizing pako.js in your JavaScript code? The error "Pako is not defined

Guide on accessing a nested array within a JSON object using JavaScript

Active tab in HTML

Adjusting Image Width with jQuery on Hover

React App with Material UI V1-beta Integration