Guidance on using an array to filter an object in Javascript

Question

Guidance on using an array to filter an object in Javascript

Looking at the object structure in Chrome Dev Tools, it appears like this:

obj: {
  1: {...},
  2: {...},
  3: {...},
  4: {...},
  5: {...},
}

On the other hand, there is a simple array as well:

arr: [1,3,5,7]

The goal here is to filter the object based on keys present in the array. For example:

obj: {
  1: {...},
  3: {...},
  5: {...},
}

Currently, the code being used is:

var select = (arr, obj) => arr.reduce((r, e) => 
  Object.assign(r, obj[e] ? { [e]: obj[e] } : null)
, {});

var output = select(arr, obj);

There seems to be sporadic issues with the functionality. It's important to note that JQuery cannot be utilized in this scenario. Any suggestions or assistance would be greatly appreciated.

javascript arrays vue.js ecmascript-6

Answer 1

Answer №1

Utilize Object.fromEntries(), Object.entries(), Array.prototype.filter(), and Array.prototype.includes() for the task of selecting specific keys within the arr:

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = Object.fromEntries(
  // Pay attention that `key` is a `string`, so we use `+`:
  Object.entries(obj).filter(([key]) => arr.includes(+key))
);

console.log(filtered);

You can also achieve this with a simple for loop, specifically using for...of. In this case, utilize again Array.prototype.includes() to select desired keys instead of eliminating unwanted ones. Also include

Object.prototype.hasOwnProperty()

to prevent the addition of keys not present in obj:

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = {};

for (const key of arr) { 
  // Ensure you check for `hasOwnProperty` to avoid adding the key `7` with value `undefined`:
  if (obj.hasOwnProperty(key)) filtered[key] = obj[key];
}

console.log(filtered);

Alternatively, you could apply the same logic by utilizing Array.prototype.reduce():

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = arr.reduce((newObj, key) => {
  // Add values to `newObj` rather than `filtered` this time:
  if (obj.hasOwnProperty(key)) newObj[key] = obj[key];
  
  // Always remember to return `newObj`:
  return newObj;
}, { })

console.log(filtered);

Lastly, if you are incorporating Lodash, consider using _.pick:

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = _.pick(obj, arr);

console.log(filtered);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.min.js"></script>

Answer 2

Utilize Object.fromEntries(), Object.entries(), Array.prototype.filter(), and Array.prototype.includes() for the task of selecting specific keys within the arr:

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = Object.fromEntries(
  // Pay attention that `key` is a `string`, so we use `+`:
  Object.entries(obj).filter(([key]) => arr.includes(+key))
);

console.log(filtered);

You can also achieve this with a simple for loop, specifically using for...of. In this case, utilize again Array.prototype.includes() to select desired keys instead of eliminating unwanted ones. Also include

Object.prototype.hasOwnProperty()

to prevent the addition of keys not present in obj:

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = {};

for (const key of arr) { 
  // Ensure you check for `hasOwnProperty` to avoid adding the key `7` with value `undefined`:
  if (obj.hasOwnProperty(key)) filtered[key] = obj[key];
}

console.log(filtered);

Alternatively, you could apply the same logic by utilizing Array.prototype.reduce():

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = arr.reduce((newObj, key) => {
  // Add values to `newObj` rather than `filtered` this time:
  if (obj.hasOwnProperty(key)) newObj[key] = obj[key];
  
  // Always remember to return `newObj`:
  return newObj;
}, { })

console.log(filtered);

Lastly, if you are incorporating Lodash, consider using _.pick:

const obj ={
  1: {},
  2: {},
  3: {},
  4: {},
  5: {},
};

const arr = [1, 3, 5, 7];

const filtered = _.pick(obj, arr);

console.log(filtered);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.min.js"></script>

Answer 3

Answer №2

If you're working in a modern setting (or using the right polyfills), the recommended methods are Object.entries, Array.prototype.filter, and Object.fromEntries. You can use them like this:

const result = Object.fromEntries(
    Object.entries(obj)
        .filter(([key, value]) => arr.includes(+key))
);

Check out this live example:

const obj = {
  1: {name: "one"},
  2: {name: "two"},
  3: {name: "three"},
  4: {name: "four"},
  5: {name: "five"},
};

const arr = [1,3,5,7];

const result = Object.fromEntries(
    Object.entries(obj)
        .filter(([key, value]) => arr.includes(+key))
);

console.log(result);

Alternatively, you can opt for a simpler loop approach:

const result = {};
for (const [key, value] of Object.entries(obj)) {
    if (arr.includes(+key)) {
        result[key] = value;
    }
}

Here's the live demonstration:

const obj = {
  1: {name: "one"},
  2: {name: "two"},
  3: {name: "three"},
  4: {name: "four"},
  5: {name: "five"},
};

const arr = [1,3,5,7];

const result = {};
for (const [key, value] of Object.entries(obj)) {
    if (arr.includes(+key)) {
        result[key] = value;
    }
}

console.log(result);

In both approaches above, it's important to note the + before key in the filter function. As the array consists of numbers, while object keys are always strings or Symbols (in this case, strings), conversion is necessary for includes to work properly.

Answer 4

If you're working in a modern setting (or using the right polyfills), the recommended methods are Object.entries, Array.prototype.filter, and Object.fromEntries. You can use them like this:

const result = Object.fromEntries(
    Object.entries(obj)
        .filter(([key, value]) => arr.includes(+key))
);

Check out this live example:

const obj = {
  1: {name: "one"},
  2: {name: "two"},
  3: {name: "three"},
  4: {name: "four"},
  5: {name: "five"},
};

const arr = [1,3,5,7];

const result = Object.fromEntries(
    Object.entries(obj)
        .filter(([key, value]) => arr.includes(+key))
);

console.log(result);

Alternatively, you can opt for a simpler loop approach:

const result = {};
for (const [key, value] of Object.entries(obj)) {
    if (arr.includes(+key)) {
        result[key] = value;
    }
}

Here's the live demonstration:

const obj = {
  1: {name: "one"},
  2: {name: "two"},
  3: {name: "three"},
  4: {name: "four"},
  5: {name: "five"},
};

const arr = [1,3,5,7];

const result = {};
for (const [key, value] of Object.entries(obj)) {
    if (arr.includes(+key)) {
        result[key] = value;
    }
}

console.log(result);

In both approaches above, it's important to note the + before key in the filter function. As the array consists of numbers, while object keys are always strings or Symbols (in this case, strings), conversion is necessary for includes to work properly.

Guidance on using an array to filter an object in Javascript

Answer №1

Answer №2

Similar questions

Vuetify autocomplete with server-side functionality

Tips for toggling an Electron.js submenu within a Vue.js Component based on a particular Vuex state

Include a Vue component within another Vue component in a Laravel application using VueJs

Retrieve the route parameters and exhibit the default option in a dropdown menu using Angular 2/4/5, along with translations implemented through ngx-translate

Retrieving objects from Firebase in a loop using promises

What is the best way to structure Vue.js components for optimal organization?

How to send cross-domain AJAX requests to RESTful web services using jQuery?

The function $.fn.dataTable.render.moment does not exist in npm package

Smooth-scroll plugin does not activate active state (due to JS modification)

Trouble arising from PHP's encoded array

What is the best way to convert a repetitive string into a reusable function?

The redirection to the HTML page happens too soon, causing the ASYNC functions to fail in saving the user's image and data to the server

Using Next Js for Google authentication with Strapi CMS

CSS :contains selector after adding a script through Ajax append operation

console rendering duplication in React

Is the ClientScriptmanager operational during a partial postback?

Present a pop-up notification box with a countdown of 30 seconds prior to the expiration of a session timeout in JSF

The most efficient method for documenting $.trigger in JavaScript/jQuery is through the use of JSD

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

Transfer the layout from one HTML file to multiple others without the need to retype the code