How to Add/Delete Data in an Array in Ember.js ?

Ember.js is a popular JavaScript framework for building scalable web applications. One of the essential aspects of web development is manipulating data, particularly arrays. In this article, we will explore how to add and delete data in an array using Ember.js.

Arrays in Ember.js are typically represented by Ember.Array or Ember.MutableArray. The Ember framework provides several built-in methods and features to manipulate arrays effectively.

Syntax:

Adding data to an array: This syntax adds the specified object to the end of the array.

arrayName.push(object);

Deleting data from an array: This syntax removes the specified object from the array.

arrayName.removeObject(object);

Approach 1: Using Mutable Array

Javascript

// Import the necessary Ember modules
import Ember from 'ember';

// Create a Mutable Array
let myArray = Ember.A(['Apple', 'Banana', 'Orange']);

// Add data to the array
myArray.push('Mango');

// Delete data from the array
myArray.removeObject('Apple');

// Output
console.log(myArray);

Output:

['Banana', 'Orange', 'Mango']

Explanation: In this approach, we use the Ember.A() function to create a mutable array. We add the data to the array using the push() method, and delete data using the removeObject() method.

Approach 2: Using Native JavaScript Array

Javascript

// Create a regular JavaScript array
let myArray = ['Apple', 'Banana', 'Orange'];

// Add data to the array
myArray.push('Mango');

// Delete data from the array
let index = myArray.indexOf('Apple');
if (index !== -1) {
  myArray.splice(index, 1);
}

// Output
console.log(myArray);

Output:

['Banana', 'Orange', 'Mango']

Explanation: In this approach, we directly create a JavaScript array. We add data to the array using the push() method and delete data using the combination of indexOf() and splice() methods.

These approaches demonstrate how to add and delete data in arrays in Ember.js. You can choose the approach that suits your project requirements and coding style.

Conclusion

Manipulating arrays in Ember.js can be done using either Ember.Array or Ember.MutableArray objects, or by utilizing native JavaScript arrays directly. The Ember framework provides convenient methods like pushObject() and removeObject() to add and delete data from arrays.