JavaScript - filter out values not included in specified list of attributes

I am seeking a technique that, when provided with a list of attributes, retains only the values associated with keys present in the list.

For instance:

attrs = ['a', 'b', 'c']
obj = {'a': 1, 'b': 2, 'c': 3}
result = {'a': 1, 'b': 2, 'c': 3}

attrs = ['a', 'b']
obj = {'a': 1, 'b': 2, 'c': 3}
result = {'a': 1, 'b': 2}

My current progress is shown below, but it is not yielding the expected output:

this.retrieveSelectedAttributes = function(attrs, obj) {
        let result = {};
        attrs.forEach((attr) => {
            if(obj.hasOwnProperty(attr)){
                Object.assign(result, {attr: obj[attr]});
            }
        });
        return result;
    };

Answer №1

If you want to transform your existing array of keys into a new object, you can utilize the .reduce method:

const generateObject = (keys, originalObj) => 
  keys.reduce((acc, key) => (acc[key] = originalObj[key], acc), {})

console.log(generateObject(['x', 'y', 'z'], {'x': 10, 'y': 20, 'z': 30}));
console.log(generateObject(['x', 'z'], {'x': 10, 'y': 20, 'z': 30}));

Answer №2

To achieve the desired result, you can utilize the Object.keys() and .reduce() methods:

const properties1 = ['x', 'y', 'z']
const object1 = {'x': 10, 'y': 20, 'z': 30}

const properties2 = ['x', 'y']
const object2 = {'x': 5, 'y': 15, 'z': 25}

const filterObject = (arr, obj) => Object.keys(obj)
                                      .filter(key => arr.includes(key))
                                      .reduce((result, current) => (result[current] = obj[current], result), {})
    
console.log(filterObject(properties1, object1));
console.log(filterObject(properties2, object2));

Answer №3

If you want to extract specific properties from an object, you can simply use the reduce method and provide an empty Object as the initial value. During each iteration, copy the desired property from the original object (obj) to the accumulator and return it.

The first version below adds all elements that are present in the attrs array:

function test(attrs, obj) {
  return attrs.reduce(function(accumulator, currentValue) {
    accumulator[currentValue] = obj[currentValue];
    return accumulator;
  }, {});
}

console.log(test(['a', 'b', 'c'], { 'a': 1, 'b': 2, 'c': 3 }));
console.log(test(['a', 'b'], { 'a': 1, 'b': 2, 'c': 3 }));
console.log(test(['a', 'b', 'c'], { 'a': 1, 'b': 2 }));

The second version only includes elements that exist in both attrs and obj:

function test(attrs, obj) {
  return attrs.reduce(function(accumulator, currentValue) {
    if(obj.hasOwnProperty(currentValue))
       accumulator[currentValue] = obj[currentValue];
    return accumulator;
  }, {});
}

console.log(test(['a', 'b', 'c'], { 'a': 1, 'b': 2, 'c': 3 }));
console.log(test(['a', 'b'], { 'a': 1, 'b': 2, 'c': 3 }));
console.log(test(['a', 'b', 'c'], { 'a': 1, 'b': 2 }));

Here is a shorter arrow function version for the same operation:

function test(attrs, obj) {
  return attrs.reduce((a, c) => { a[c] = obj[c]; return a; }, {});
}

console.log(test(['a', 'b', 'c'], { 'a': 1, 'b': 2, 'c': 3 }));
console.log(test(['a', 'b'], { 'a': 1, 'b': 2, 'c': 3 }));
console.log(test(['a', 'b', 'c'], { 'a': 1, 'b': 2 }));

By using the reduce method directly on the array, there's no need to use Object.keys or Array.prototype.filter to achieve the desired result.

Answer №4

To remove unwanted keys from an object, iterate through all keys and store the ones to be deleted in an array. Then, delete those keys using the delete method. Use Object.keys(obj) to get a list of all keys.

attrs1 = ['a', 'b', 'c']
obj1 = {
  'a': 1,
  'b': 2,
  'c': 3
}

attrs2 = ['a', 'b']
obj2 = {
  'a': 1,
  'b': 2,
  'c': 3
}

keepKnownAttributes = function(attrs, obj) {
  let keysToDelete = [];
  Object.keys(obj).forEach(key => {
    if (!attrs.includes(key)) {
      keysToDelete.push(key);
    }
  });

  keysToDelete.forEach(key => {
    delete obj[key];
  });

  return obj;
};

console.log(keepKnownAttributes(attrs1, obj1));
console.log(keepKnownAttributes(attrs2, obj2));

The code can be simplified using lambda functions.

attrs1 = ['a', 'b', 'c']
obj1 = {
  'a': 1,
  'b': 2,
  'c': 3
}

attrs2 = ['a', 'b']
obj2 = {
  'a': 1,
  'b': 2,
  'c': 3
}

keepKnownAttributes = function(attrs, obj) {
  Object.keys(obj).filter(e => !attrs.includes(e)).map(key => delete obj[key]);
  return obj;
};

console.log(keepKnownAttributes(attrs1, obj1));
console.log(keepKnownAttributes(attrs2, obj2));

No need to return anything as the original object is modified. Cheers!

Answer №5

To achieve this, you can employ the reduce method:

const elements = ['x', 'y']
const data = {'x': 10, 'y': 20, 'z': 30}

const updatedData = elements.reduce((accumulator, item) => 
  (accumulator[item] = data[item], accumulator)
, {});

If implemented as a reusable function:

const extractElementsFrom = (sourceObject, elements) =>
  elements.reduce((result, item) => 
    (result[item] = sourceObject[item], result)
  , {});

Answer №6

If you want to achieve this task, you can utilize Array.prototype.filter() along with Array.prototype.reduce(). The approach involves filtering out the keys that exist in the specified `attrs` array and then creating a new object containing those filtered keys and their corresponding values.

let exampleObj = {'x': 1, 'y': 2, 'z': 3}

function extractKeys(obj, attrs){
  return Object.keys(obj).filter(attr => attrs.includes(attr)).reduce((acc, attr) => {
    acc[attr] = obj[attr];
    return acc;
  },{})
}
console.log(extractKeys(exampleObj,['x','y','z']));
console.log(extractKeys(exampleObj,['x','y']));

Answer №7

Works like magic ;-)

function filterAttributes(attrs, obj) {
  let filteredObj = {};
  for (var key in obj) {
    if (attrs.includes(key)) {
      filteredObj[key] = obj[key];
    }
  }
  return filteredObj;
}

console.log(filterAttributes(["a", "b"], { a: 1, b: 2, c: 3 }));

Answer №8

To check if an object has a specific property, you can use the .hasOwnProperty() method. This method will return true if the object contains the specified property. You can read more about it here.

var attributes = ['x', 'y']
var data = {
  'x': 10,
  'y': 20,
  'z': 30
}
var newData = {};
attributes.forEach(attr =>data.hasOwnProperty(attr)?newData[attr] = data[attr]:false)
console.log(newData)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

Unable to attach a javascript eventListener to a newly created element

I've utilized JavaScript to generate 625 <div class="box"><div> elements and now I'm trying to attach an event listener to each box. The boxes are being created successfully, however, the listener does not seem to be working ...

Sending JSON Data from Angular2 Component to Node.js Server

Currently, I am facing an issue where I am unable to successfully insert data into a database using Angular2 and Node.js. Upon running my script, I use console.log(this.address); to verify that I am passing json, and the output in the console is as follow ...

The functionality of the calculator, created using HTML and JavaScript, is impeded on certain devices

I developed a web-based app that functions as a simple calculator for calculating freight/shipping prices to Venezuela. The app allows users to select between 1 to 4 packages, and choose different types of freight including air (normal, express) and mariti ...

The promise from the angular $http function is being duplicated

As I work on evaluating an expression within an if statement to return either true or false, I am utilizing $http promises. Despite the abundance of documentation available on this topic, I am confident in my ability to resolve any issues that may arise. ...

What is the best way to retrieve missing fields from a JSON file according to the schema, and vice versa

I just installed the jsonschema library by running pip install jsonschema. from jsonschema import validate schema_data = { "type" : "object", "properties" : { "price" : {"type" : "number"}, "name" : {"type" : "string"}, "a ...

transform the PHP object array string into a PHP variable object

I have an api call that retrieves data stdClass Object ( [data] => stdClass Object ( [TransactionId] => 10254 [RequestId] => 1548 [ResponseTime] => 0.161 [SSP] => test1542 ...

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

For my multilingual website, I wrote this simple JQuery code: (function() { var language, translate; translate = function(jsdata) { $('[tkey]').each(function(index) { var strTr; strTr = jsdata[$(this).attr('tkey')] ...

Troubleshooting Problems with Google Maps and Javascript/JSON in Internet Explorer

Currently, I am utilizing the Google Maps API to construct a map that displays store locations in close proximity to a user-specified location. Everything is functioning properly, however, I am encountering an error in Internet Explorer that I would like t ...

Customizing React components based on API data

const LinkList = () => { const [links, setLinks] = useState([]); const url = 'http://localhost:5000/xyz'; const hook = () => { console.log('effect'); axios .get(url) .then(respo ...

Show dynamic JSON data in a nested format on the user interface with Aurelia's Treeview component

In the visual representation provided, there are currently three objects in the array. These objects, referred to as "parents", each have their own set of "children". The complexity lies in the fact that a parent element can also serve as a child element w ...

Even though I am aware that the variable AJAX is attempting to return is not empty, it is still returning 'undefined'

I wrote a basic PHP script that retrieves information from a database and stores it in a multidimensional array: <?php //PHP code to fetch data from DB error_reporting(E_ALL); $db = new mysqli("localhost","root","pass", "Media") ...

Creating dynamic objects in C# using reflection

Is there a way to dynamically build a Payload for processing a Json file and adding values to the database, including only columns that are present in the Json? code payloadMessageContext.Update(new Payload { Id = 1, column1 = Attributes.Where(x =& ...

Choosing an element in Protractor based on an HTML attribute value that contains a specific text

Having trouble figuring out how to target an element that lacks a standard unique id or class. How can I locate this input element using Protractor? Please note that I am unable to use the ComboBoxInput_Default class because it is shared across multiple p ...

How can you modify a button in Ionic 2 based on the login status, using a modal to redirect to a different page once authenticated?

I have a button on my main page that is supposed to display 'Log out' when the user is currently logged in, and 'Log in' when there is no active user session. Clicking on the login button opens a modal. After successful login, the user ...

Find the line containing the selected text within a JavaScript code

I am working on a contentEditable div where users can enter multi-line text. I need to be able to inspect the line that the user is currently typing in when they press enter. Is there a way to retrieve the context of that specific line (or all lines)? Is ...

Implementing a color change for icons in React upon onClick event

export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...

modifying the state in a stateless React component

Hello everyone! I am here trying to work with hooks and I'm not sure how to achieve my goal. Here is the code I have: import React, { useState } from 'react' import { useForm } from 'react-hook-form' import {useDispatch } from &a ...

Use jQuery to change the background color when clicked

Below is the HTML code with UL and LI elements: <UL> <LI><span id='select1'>Text</span></LI> <LI><span id='select2'>Text</span></LI> <LI><span id='select3'>Tex ...

NodeJS Socket not transmitting file after connection with client

Having scoured the depths of various resources, including SO and Google, I have hit a roadblock. I am struggling to understand why the socket is failing to capture the uploaded file via the form; it simply stops after connecting. When I check the console, ...