What is the best way to add a null property from an object into an array?

Question

What is the best way to add a null property from an object into an array?

I am currently working with an array of objects and have the need to remove any empty properties within the objects.

For instance:

var quotes = [
{
    quote: "Bolshevism is not a policy; it is a disease. It is not a creed; it is a pestilence.",
    source: "Winston Churchill",
    citation: "",
    year: "29 May 1919",
    place: ""
},
{
    quote: "Learn while you live",
    source: "",
    citation: "X",
    year: "1950",
    place: ""
}];

I have multiple objects like these with randomly empty properties.

What I want to achieve is to display only the properties that are not empty on the page.

My approach involves looping through the objects to identify and remove the empty properties using indexOf() and splice():

function findEmptyProp(quotes) {
   for (prop in quotes) {
     if(quotes[i].children === '') {
        return indexOf(quotes[i]);
        quotes.splice(i, 1);
}}}

Any assistance would be greatly appreciated.

javascript arrays object splice

Answer 1

Answer №1

When working with arrays, the splice method is commonly used. However, when dealing with objects, the delete method must be utilized.

One approach to handle this situation is outlined below:

var quotes = [{
  quote: "Bolshevism is not a policy; it is a disease. It is not a creed; it is a pestilence.",
  source: "Wyston Churchill",
  citation: "",
  year: "29 May 1919",
  place: ""
}, {
  quote: "Learn while you live",
  source: "",
  citation: "X",
  year: "1950",
  place: ""
}];

quotes.forEach(function(o){
  for (var k in o){
    if(o.hasOwnProperty(k) && isEmpty(o[k])){
      delete o[k];
    }
  }
});

function isEmpty(val){
  return val === undefined || 
    val === null || 
    (typeof(val) === "object" && Object.keys(val).length === 0) || 
    (typeof(val) === "string" && val.trim().length === 0)
}

console.log(quotes)

Adding to the insight provided by deceze, additional cases for considering values as empty have been included. It is also recommended to verify the hasOwnProperty method for updating properties of the object itself.

Answer 2

When working with arrays, the splice method is commonly used. However, when dealing with objects, the delete method must be utilized.

One approach to handle this situation is outlined below:

var quotes = [{
  quote: "Bolshevism is not a policy; it is a disease. It is not a creed; it is a pestilence.",
  source: "Wyston Churchill",
  citation: "",
  year: "29 May 1919",
  place: ""
}, {
  quote: "Learn while you live",
  source: "",
  citation: "X",
  year: "1950",
  place: ""
}];

quotes.forEach(function(o){
  for (var k in o){
    if(o.hasOwnProperty(k) && isEmpty(o[k])){
      delete o[k];
    }
  }
});

function isEmpty(val){
  return val === undefined || 
    val === null || 
    (typeof(val) === "object" && Object.keys(val).length === 0) || 
    (typeof(val) === "string" && val.trim().length === 0)
}

console.log(quotes)

Adding to the insight provided by deceze, additional cases for considering values as empty have been included. It is also recommended to verify the hasOwnProperty method for updating properties of the object itself.

Answer 3

Answer №2

Just a heads up: The Object.keys(obj) method is useful for extracting an array of an object's keys. For example,...

var objectArray = [
  {
    key1: '1',
    key2: '2',
    key3: ''
  },
  {
    key1: '1',
    key2: '',
    key3: '3'
  },
  {
    key1: '',
    key2: '2',
    key3: '3'
  }
];

objectArray.forEach(function(obj) {
    /* 'obj' represents each object in 'objectArray' */
    Object.keys(obj).forEach(function(key) {
        /* 'key' represents each key in 'obj' */
        if (obj[key] === '') delete obj[key];
    });
});

/* testing objectArray */
objectArray.forEach(function(obj) {
    console.debug(obj);
});

/** =>
    Object { key1: "1", key2: "2" }
    Object { key1: "1", key3: "3" }
    Object { key2: "2", key3: "3" }
**/

Utilizing array methods like .forEach(), .filter(), .sort(), .reduce(), and .map() on Objects can be extremely beneficial.

Answer 4

Just a heads up: The Object.keys(obj) method is useful for extracting an array of an object's keys. For example,...

var objectArray = [
  {
    key1: '1',
    key2: '2',
    key3: ''
  },
  {
    key1: '1',
    key2: '',
    key3: '3'
  },
  {
    key1: '',
    key2: '2',
    key3: '3'
  }
];

objectArray.forEach(function(obj) {
    /* 'obj' represents each object in 'objectArray' */
    Object.keys(obj).forEach(function(key) {
        /* 'key' represents each key in 'obj' */
        if (obj[key] === '') delete obj[key];
    });
});

/* testing objectArray */
objectArray.forEach(function(obj) {
    console.debug(obj);
});

/** =>
    Object { key1: "1", key2: "2" }
    Object { key1: "1", key3: "3" }
    Object { key2: "2", key3: "3" }
**/

Utilizing array methods like .forEach(), .filter(), .sort(), .reduce(), and .map() on Objects can be extremely beneficial.

What is the best way to add a null property from an object into an array?

Answer №1

Answer №2

Similar questions

Discovering the highest value in the final row of a two-dimensional array

AngularJS Class Confirmation Button

Push the accordion tab upwards towards the top of the browser

How to effectively utilize wrapAsync in MeteorJS when working with callbacks in the vzaar API?

Switch between 2 buttons by using ng-class in Angular JS

Can a method be generated through the use of an argument?

Utilizing React Router V4 to Render Dual Components on a Single Route

Error in Node.js Socket.io: The disconnect event is being triggered before the connect event

Struggling with dragging Vue.js modals?

Obtain serialized information from php using ajax

Unable to access the newly created object's properties following the instantiation of a new resource in AngularJS

Troubleshooting Automatic Scrolling Problems in React Virtualized

What is the best way to change the first letter of a string to uppercase in JavaScript?

Upgrade your project from Angular 5 to Angular 9 using webpack

Angular Js powered admin control panel

Issue with inserting data into MySQL database using Node.js (JavaScript)

Tips for repairing damaged HTML in React employ are:- Identify the issues

Converting an Array into a String

A function that checks if all numbers from 0 to n-1 are present in the given array, having a time complexity of O(n) and returning either 0 or 1

Exploring the world of reactive programming in JavaScript by transforming traditional AJAX calls into Bacon.js streams while incorporating