Retrieve elements with a customized attribute from an array in JavaScript

Question

Retrieve elements with a customized attribute from an array in JavaScript

In my JavaScript code, I have added objects to an array, each with a new property called "Type". Now, I need to extract the objects from the array that have this "Type" property and put them into a new array.

var arr = [
{ID: 1, Name: "Name1"},
{ID: 2, Name: "Name2"}]

var newObject = {
ID: 3,
Name: 'Test',
Type: 'New'
};

arr.push(newObject);

I attempted

var filteredArray = arr.filter(item => item.Type !== null);

However, this code returns all objects from the original array.

The desired result should be

[{ ID: 3, Name: "Test", Type: "New" }]

javascript arrays

Answer 1

Answer №1

Avoid checking for null. Opt for using undefined instead:

let latestValue = array.filter(item => item.Type !== undefined);

Take a look at this explanation about null and undefined:

Null: Represents the deliberate absence of a value. It is one of JavaScript's primitive values. Undefined: Indicates that the value is non-existent in the code. It refers to the global object.

Answer 2

Avoid checking for null. Opt for using undefined instead:

let latestValue = array.filter(item => item.Type !== undefined);

Take a look at this explanation about null and undefined:

Null: Represents the deliberate absence of a value. It is one of JavaScript's primitive values. Undefined: Indicates that the value is non-existent in the code. It refers to the global object.

Answer 3

Answer №2

The reason for this behavior is that the value is undefined rather than null

The following code snippet will retrieve any data type except for falsy types such as "Type" : 0 and "Type": ""

let items = [
{ID: 1, Name: "Name1"},
{ID: 2, Name: "Name2"}]

var newObj = {
ID: 3,
Name: 'Test',
Type: 'New'
};

items.push(newObj);

const filteredValues = items.filter(item => { 
  console.log(item.Type) 
  return item.Type; // excluding undefined, null, and empty string.
  });
  
console.log(filteredValues)

Answer 4

The reason for this behavior is that the value is undefined rather than null

The following code snippet will retrieve any data type except for falsy types such as "Type" : 0 and "Type": ""

let items = [
{ID: 1, Name: "Name1"},
{ID: 2, Name: "Name2"}]

var newObj = {
ID: 3,
Name: 'Test',
Type: 'New'
};

items.push(newObj);

const filteredValues = items.filter(item => { 
  console.log(item.Type) 
  return item.Type; // excluding undefined, null, and empty string.
  });
  
console.log(filteredValues)

Answer 5

Answer №3

If you're working with newer versions of Javascript (like ES 2021), there's a handy feature called nullish coalescing:

var arr = [
{ID: 1, Name: "Name1"},
{ID: 2, Name: "Name2"}]

var newObject = {
ID: 3,
Name: 'Test',
Type: 'New'
};

arr.push(newObject);

var newVal = arr.filter(x => x.Type ?? false);
console.log(newVal)

Nullish coalescing comes in handy when a variable is defined, but it evaluates to false. With a ?? b, either a or b will be returned. If a is undefined or null, then b will be returned. Otherwise, a will be returned. For more information, you can check out MDN.

Answer 6

If you're working with newer versions of Javascript (like ES 2021), there's a handy feature called nullish coalescing:

var arr = [
{ID: 1, Name: "Name1"},
{ID: 2, Name: "Name2"}]

var newObject = {
ID: 3,
Name: 'Test',
Type: 'New'
};

arr.push(newObject);

var newVal = arr.filter(x => x.Type ?? false);
console.log(newVal)

Nullish coalescing comes in handy when a variable is defined, but it evaluates to false. With a ?? b, either a or b will be returned. If a is undefined or null, then b will be returned. Otherwise, a will be returned. For more information, you can check out MDN.

Retrieve elements with a customized attribute from an array in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What distinguishes defining a function through a prototype versus as a class property?

Looking to retrieve a JavaScript code block from an AJAX response using jQuery?

How come this 2-dimensional array is adding elements unexpectedly?

Navigating through JQuery

The onClick event in React/NextJS is not functioning properly when applied to an external component

Executing a function when a dropdown in Bootstrap is expanded and closed

The Angular module instantiation failed with the error message: "[$injector:modulerr] Failed to

Tips for Customizing the Appearance of Material UI Select Popups

What is the best way to pass an array through router navigate function?

Concealing the NavBar When Showing a Popup Using React

I was assigned to calculate and transfer the length of the string within the parentheses (written in javascript)

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there an issue with JQM plugin due to jQuery's append() function?

Error Message: Node.js EJS 'Is Undefined'

Issue with VueJS components not functioning as expected with routes

Leveraging express functions in Node.js framework

Utilizing the Context API in Next.js to transfer a prop from the layout component to its children

What is the best way to change the folder name when hovering over it?

Unusual trait of TrackballControls.target within the world of Three.js

Extract several "documents" from one compilation