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

What is the best way to obtain a direct file link from a server URL using JavaScript?

What is the best way to divide an array into pairs and store them in separate arrays?

Extracting specific key-value pairs from JSON data

Adjust the opacity of a div's background without impacting the children elements

Tips on verifying the count with sequelize and generating a Boolean outcome if the count is greater than zero

I'm having trouble getting Tailwind CSS colors to work with my Next.js components. Any tips on how to apply background colors

`What are some strategies for addressing an intermittent issue in an application utilizing Vue Apollo?`

Using JQuery toggleclass to add transitioning effects to a :after element

A combination of Tor Browser, Selenium, and Javascript for

Ways to center text horizontally in a line with the help of bootstrap styles?

Detecting changes to DOM elements without using jQueryResponding to DOM element

Is there a way to streamline and optimize this React/Material UI code for faster performance?

Discover the simple steps to include row numbers or serial numbers in an angular2 datagrid

Executing functions in a loop using Angular

Engage with React JS arrays of objects

I'm attempting to store the information from fs into a variable, but I'm consistently receiving undefined as the output

What steps should I take to make sure the vuex store is included in my build process?

Modifying the Vue.js Vue3-slider component for custom color schemes

How come the sound is played after the command is given?

Leveraging two AJAX requests within a single function