What is the best way to eliminate the "1 empty item" from a JSON object using JavaScript?

Question

What is the best way to eliminate the "1 empty item" from a JSON object using JavaScript?

This is an example json object that has been modified to remove certain values.

{
  name: { first: 'Robert', middle: '', last: 'Smith' },
  age: 25,
  DOB: '-',
  hobbies: [ 'running', 'coding', '-' ],
  education: { highschool: 'N/A', college: 'Yale' }
}

A similar transformation was attempted, but there was difficulty removing the placeholder for an empty item from the array.

{
  name: { first: 'Robert', last: 'Smith' },
  age: 25,
  hobbies: [ 'running', 'coding', <1 empty item> ],
  education: { college: 'Yale' }
}

The challenge now is how to effectively eliminate the placeholder for an empty item from the json object.

Here is an implementation of the code:

axios.get("https://coderbyte.com/api/challenges/json/json-cleaning")
  .then((res) => {
    let parseData = res.data;

    const removeValue = (obj) => {
      Object.keys(obj).forEach(k => 
        
        // console.log(obj[k])
        (obj[k] && obj[k] === "-") && 
        delete obj[k] ||

        (obj[k] && typeof obj[k] === 'object')
        && removeValue(obj[k]) || 
        
        (!obj[k] && obj[k] !== undefined) && 
        delete obj[k] || 
        
        (obj[k] && obj[k] === "N/A") && 
        delete obj[k]


      );
      return obj
    }

    newData = removeValue(parseData)

    console.log(newData)
  })

javascript json javascript-objects

Answer 1

Answer №1

When it comes to manipulating arrays, using the delete method may not always behave as expected. Deleting an item from an array does not actually modify its length property. For instance, deleting the 3rd element of a 3-element array will result in an array with only two elements, but the length will remain 3.

To handle arrays more effectively, it's better to check if the object is indeed an array and then use the .filter method accordingly.

const payload = {
  name: { first: 'Robert', middle: '', last: 'Smith' },
  age: 25,
  DOB: '-',
  hobbies: [ 'running', 'coding', '-' ],
  education: { highschool: 'N/A', college: 'Yale' }
};
const isGoodValue = val => val && val !== '-' && val !== 'N/A';

const removeBadValues = (obj) => {
  if (Array.isArray(obj)) {
    return obj
      .filter(isGoodValue)
      .map(removeBadValues);
  }
  if (typeof obj === 'object') {
    for (const [key, value] of Object.entries(obj)) {
      if (!isGoodValue(value)) {
        delete obj[key];
      } else {
        obj[key] = removeBadValues(value);
      }
    }
  }
  return obj;
}
const newData = removeBadValues(payload)
console.log(newData)

Answer 2

When it comes to manipulating arrays, using the delete method may not always behave as expected. Deleting an item from an array does not actually modify its length property. For instance, deleting the 3rd element of a 3-element array will result in an array with only two elements, but the length will remain 3.

To handle arrays more effectively, it's better to check if the object is indeed an array and then use the .filter method accordingly.

const payload = {
  name: { first: 'Robert', middle: '', last: 'Smith' },
  age: 25,
  DOB: '-',
  hobbies: [ 'running', 'coding', '-' ],
  education: { highschool: 'N/A', college: 'Yale' }
};
const isGoodValue = val => val && val !== '-' && val !== 'N/A';

const removeBadValues = (obj) => {
  if (Array.isArray(obj)) {
    return obj
      .filter(isGoodValue)
      .map(removeBadValues);
  }
  if (typeof obj === 'object') {
    for (const [key, value] of Object.entries(obj)) {
      if (!isGoodValue(value)) {
        delete obj[key];
      } else {
        obj[key] = removeBadValues(value);
      }
    }
  }
  return obj;
}
const newData = removeBadValues(payload)
console.log(newData)

Answer 3

Answer №2

This method can be utilized

arr.activities.splice(arr.activities.indexOf('-'), 1);

Remember to substitute "arr" with the respective object.

Answer 4

This method can be utilized

arr.activities.splice(arr.activities.indexOf('-'), 1);

Remember to substitute "arr" with the respective object.

Answer 5

Answer №3

When utilizing the JSON stringify function with a custom replacer argument, any replacements made will also affect nested keys within nested objects:

let data = {
  name: { first: "Alice", middle: "", last: "Johnson" },
  age: 30,
  DOB: "-",
  hobbies: ["swimming", "reading", "-"],
  education: { highschool: "N/A", college: "Harvard" },
};
function customize(key, value) {
  if (value === "N/A" || value === "") {
    return undefined;
  } else if (Array.isArray(value)) {
    return value.filter((item) => item != "-");
  }
  return value;
}
console.log(JSON.stringify(data, customize, 4));

Note: Remember to use JSON.parse() when converting it back into an object.

Answer 6

When utilizing the JSON stringify function with a custom replacer argument, any replacements made will also affect nested keys within nested objects:

let data = {
  name: { first: "Alice", middle: "", last: "Johnson" },
  age: 30,
  DOB: "-",
  hobbies: ["swimming", "reading", "-"],
  education: { highschool: "N/A", college: "Harvard" },
};
function customize(key, value) {
  if (value === "N/A" || value === "") {
    return undefined;
  } else if (Array.isArray(value)) {
    return value.filter((item) => item != "-");
  }
  return value;
}
console.log(JSON.stringify(data, customize, 4));

Note: Remember to use JSON.parse() when converting it back into an object.

Answer 7

Answer №4

var data = {
  Name: 'John Doe',
  Age: '-',
  Occupation: 'Developer'
}

function removeEmptyFields(obj) {
  for (var key in obj) {
    if (obj[key] === '-' || obj[key] === undefined) {
      delete obj[key];
    }
  }
  return obj
}

console.log(data);
console.log(removeEmptyFields(data));

Answer 8

var data = {
  Name: 'John Doe',
  Age: '-',
  Occupation: 'Developer'
}

function removeEmptyFields(obj) {
  for (var key in obj) {
    if (obj[key] === '-' || obj[key] === undefined) {
      delete obj[key];
    }
  }
  return obj
}

console.log(data);
console.log(removeEmptyFields(data));

Answer 9

Answer №5

Utilize the Array.prototype.splice() method

Implement the following code recursively to remove empty arrays or objects:

const data_row = 
  { name      : { first: 'Robert', middle: '', last: 'Smith'} 
  , age       : 25
  , DOB       : '-'
  , hobbies   : [ 'running', 'coding', '-'] 
  , education : { highschool: 'N/A', college: 'Yale'} 
  } 
     
clearner( data_row )
console.log( data_row )


function clearner( obj )
  {
  const bad = ['-', 'N/A',  '']
  
  for (prop in obj)  
    {
    switch (Array.isArray(obj[prop]) ? 'array' : typeof obj[prop])
      {
      case 'array':
        for (let i=obj[prop].length;i--;)
          if ( bad.includes( obj[prop][i] ))
            obj[prop].splice(i,1); 
        break;
      case 'string':
        if (bad.includes( obj[prop] ))
          delete obj[prop]
        break;
      case 'object':
        clearner( obj[prop] )
        break;
      } 
    if ( obj[prop] && obj[prop].length === 0 )  // empty array or object removal
      delete obj[prop]  
  } }

.as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}

Answer 10

Utilize the Array.prototype.splice() method

Implement the following code recursively to remove empty arrays or objects:

const data_row = 
  { name      : { first: 'Robert', middle: '', last: 'Smith'} 
  , age       : 25
  , DOB       : '-'
  , hobbies   : [ 'running', 'coding', '-'] 
  , education : { highschool: 'N/A', college: 'Yale'} 
  } 
     
clearner( data_row )
console.log( data_row )


function clearner( obj )
  {
  const bad = ['-', 'N/A',  '']
  
  for (prop in obj)  
    {
    switch (Array.isArray(obj[prop]) ? 'array' : typeof obj[prop])
      {
      case 'array':
        for (let i=obj[prop].length;i--;)
          if ( bad.includes( obj[prop][i] ))
            obj[prop].splice(i,1); 
        break;
      case 'string':
        if (bad.includes( obj[prop] ))
          delete obj[prop]
        break;
      case 'object':
        clearner( obj[prop] )
        break;
      } 
    if ( obj[prop] && obj[prop].length === 0 )  // empty array or object removal
      delete obj[prop]  
  } }

.as-console-wrapper {max-height: 100% !important;top: 0;}
.as-console-row::after {display: none !important;}

What is the best way to eliminate the "1 empty item" from a JSON object using JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Harnessing the power of lazysizes with WebP

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

Encountering an issue with the `className` prop not matching when deploying to Heroku, yet the functionality works perfectly when testing locally

Implementing the disabled attribute in input text fields with Vue.js

The text is not appearing properly in an HTML file due to issues with

What steps can be taken to verify that the submitted data is a legitimate numerical pair?

What is the method to invoke a function within another function in Angular 9?

Common causes leading to my header component experiencing hydration errors in Next.js

When using the HTML5 input type time in Chrome and the value is set to 00:00:00, it may not be fully completed

Tips for extracting multiple Json data in Android development

Issue with data entry: unable to enter the letter 'S' in search field

Generating requests using ExpressJS

How to Stop AJAX Requests Mid-Flight with JQuery's .ajax?

How to pass GetServerSideProps into Page component props in Next.js with custom _app.js

Attempting to save an object that references an unsaved transient instance - ensure the transient instance (com.example.model.Salutation) is saved before

Effortlessly automate clicking with JavaScript or HTML - learn how now!

What could be causing the npm server error in my Vue.js application?

Why is React's nested routing failing to render properly?

Receiving JSON objects from Javascript in Django Views

What methods can be utilized to accurately determine a user's online status without continuously sending AJAX requests to the server through setInterval?