Refine objects based on their properties without removing them from the dataset

Question

Refine objects based on their properties without removing them from the dataset

I have a specific object structured as follows:

var myObj: {
    2:"None",
    20:"A",
    31:"A",
    32:"A",
    Social:"B",
    Method:"None"
}

My goal is to retrieve the object without the properties 'Social' and 'Method'.

Initially, I attempted to remove these properties within a computed property function, but it ended up deleting them from the main object entirely:

props: ['myObj']

computed: {
     filterOut: {
        var myObject = this.myObj
        delete myVar['Social'];
        delete myVar['Method'];

        return myObject
    }
}

Subsequently, I tried utilizing the filter method, only to encounter an error:

      var myObject = this.myObj.filter(key => {
          return key != 'Method' || key != 'Social'
      })

      return myObject

TypeError: this.myObj.filter is not a function

What would be the most effective approach to obtain the below object based on the initial one?

var myObj: {
    2:"None",
    20:"A",
    31:"A",
    32:"A"
}

javascript object ecmascript-6 vue.js

Answer 1

Answer №1

To create a fresh object without those specific properties, you can follow these methods:

There is a promising proposal at stage 3 for rest/spread properties which allows you to achieve this easily:

const {Social, Method, ...newObj} = originalObj;

(Make sure to disregard the constants Social and Method.) Although it's currently just at stage 3, it is progressing towards stage 4 and has good chances of being included in ES2018; recent versions of both Chrome and Firefox support it without requiring special flags.

Keep in mind that this method only deals with own, enumerable properties.

In ES2015+, you have another option:

const newObj = {};
for (const key of Object.keys(originalObj)) {
    if (key != "Social" && key != "Method") {
        newObj[key] = originalObj[key];
    }
}

For those using ES5:

var newObj = {};
Object.keys(originalObj).forEach(function(key) {
    if (key != "Social" && key != "Method") {
        newObj[key] = originalObj[key];
    }
});

Both of these approaches also cover own, enumerable properties; if you require all own non-Symbol properties, consider using Object.getOwnPropertyNames.

Answer 2

To create a fresh object without those specific properties, you can follow these methods:

There is a promising proposal at stage 3 for rest/spread properties which allows you to achieve this easily:

const {Social, Method, ...newObj} = originalObj;

(Make sure to disregard the constants Social and Method.) Although it's currently just at stage 3, it is progressing towards stage 4 and has good chances of being included in ES2018; recent versions of both Chrome and Firefox support it without requiring special flags.

Keep in mind that this method only deals with own, enumerable properties.

In ES2015+, you have another option:

const newObj = {};
for (const key of Object.keys(originalObj)) {
    if (key != "Social" && key != "Method") {
        newObj[key] = originalObj[key];
    }
}

For those using ES5:

var newObj = {};
Object.keys(originalObj).forEach(function(key) {
    if (key != "Social" && key != "Method") {
        newObj[key] = originalObj[key];
    }
});

Both of these approaches also cover own, enumerable properties; if you require all own non-Symbol properties, consider using Object.getOwnPropertyNames.

Answer 3

Answer №2

To achieve the desired outcome, utilize Object.assign for creating a fresh object followed by removing unwanted properties.

const sampleObject = {
    2:"None",
    20:"A",
    31:"A",
    32:"A",
    Social:"B",
    Method:"None"
};

const newObject = Object.assign({}, sampleObject); // Alternatively, employ the spread operator {...sampleObject};

delete newObject.Social;
delete newObject.Method;

console.log(newObject);

Answer 4

To achieve the desired outcome, utilize Object.assign for creating a fresh object followed by removing unwanted properties.

const sampleObject = {
    2:"None",
    20:"A",
    31:"A",
    32:"A",
    Social:"B",
    Method:"None"
};

const newObject = Object.assign({}, sampleObject); // Alternatively, employ the spread operator {...sampleObject};

delete newObject.Social;
delete newObject.Method;

console.log(newObject);

Answer 5

Answer №3

If you're looking for a useful function, check out reduce.

Give this code a shot:

function removeProperty(obj, prop) {
  return Object.keys(obj).reduce((result, key) => {
    result = result || {};
    if (key !== prop) {
      return { ...result, [key]: obj[key] };
    }
    return result;
  })
}

You might find this helpful when working directly in the browser or wanting to avoid using babel. The following example has not been tested, whereas the previous one is thoroughly tested and part of my daily toolbox.

function removeProperty(obj, prop) {
  return Object.keys(obj).reduce((result, key) => {
    result = result || {};
    if (key !== prop) {
      return Object.assign(result, {[key]: obj[key]});
    }
    return result;
  })
}

Answer 6

If you're looking for a useful function, check out reduce.

Give this code a shot:

function removeProperty(obj, prop) {
  return Object.keys(obj).reduce((result, key) => {
    result = result || {};
    if (key !== prop) {
      return { ...result, [key]: obj[key] };
    }
    return result;
  })
}

You might find this helpful when working directly in the browser or wanting to avoid using babel. The following example has not been tested, whereas the previous one is thoroughly tested and part of my daily toolbox.

function removeProperty(obj, prop) {
  return Object.keys(obj).reduce((result, key) => {
    result = result || {};
    if (key !== prop) {
      return Object.assign(result, {[key]: obj[key]});
    }
    return result;
  })
}

Answer 7

Answer №4

Perhaps this versatile approach could provide a solution:

var obj = {
    2: "None",
    20: "A",
    31: "A",
    32: "A",
    Social: "B",
    Method: "None"
}

var filteredResult = _.pickBy(obj, (value, key) => _.toInteger(key))

console.log(filteredResult)

<script src="https://unpkg.com/lodash"></script>

Answer 8

Perhaps this versatile approach could provide a solution:

var obj = {
    2: "None",
    20: "A",
    31: "A",
    32: "A",
    Social: "B",
    Method: "None"
}

var filteredResult = _.pickBy(obj, (value, key) => _.toInteger(key))

console.log(filteredResult)

<script src="https://unpkg.com/lodash"></script>

Refine objects based on their properties without removing them from the dataset

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Bringing in PeerJs to the NextJs framework

Cursor opens up when the popup menu is activated

Attempting to hash the password led to encountering an error

What could be causing the issue with this JS code?

Oops! The Vue star rating encountered an error because it couldn't read the length property of an undefined value at line 26 of listToStyles.js

Express is throwing a TypeError because it is unable to access the property 'app', which is undefined

Unable to retrieve a particular file from S3 while utilizing Strongloop

Display table rows that are hidden in an HTML/Angular toggle function

Save information in a session using html and javascript

Dealing with HTML fields that share the same name in various positions can be tricky

After activating the rewrite feature on Tomcat valve, JavaScript is loading twice

Issue with filtering of values returned by functions

Using the .each method in AJAX JQUERY to iterate through callback JSON data and applying an if statement with Regular Expression to identify matches

Having trouble with Simplemodal showing link content in the modal window

Need assistance with jQuery AJAX?

In Vue.js, I only want to retrieve and display the parent's ID or name once for each of its child components

Is there a way to apply an event function after adding elements through append?

Cannot find JS variable after loop has completed

What is the best way to eliminate all click event handlers with jQuery?

Utilize vue.js and spring-boot to seamlessly upload files utilizing axios