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

When transitioning between views in Angular App, it freezes due to the large data response from an HTTP request

Why is it that PowerShell cannot execute Angular commands?

Making a dropdown menu spin using Jquery and Javascript

Get rid of any empty space in the image preview icon

Safari not updating Angular ng-style properly

Verifying One Time Password (OTP) from MSG91 URL using ReactJS

I am interested in monitoring for any alterations to the @input Object

Achieving a transparent background in WebGLRender: A guide

AngularJS: Refresh array following the addition of a new item

Issues with implementing Rails 4 with jQuery, javascript, and coffee scripts causing functionality to malfunction

Tips for querying orchestrate.io

Can you tell me if the "dom model" concept belongs to the realm of HTML or JavaScript?

adjust time in jQuery AJAX request when a button is clicked

Retrieving data from the setlist FM API

Ways to activate a function upon validation of an email input type

When attempting to add an item to an array within a sub-document using Mongoose and MongoDB, the error message "Property 'messages' not found" is returned

Fade out the notification div when the user clicks anywhere outside of it

How can TypeORM be used to query a ManyToMany relationship with a string array input in order to locate entities in which all specified strings must be present in the related entity's column?

Clear Vuex state upon page refresh

Advanced filtering of arrays in JavaScript