filter values of an object by keys given from an array and render them in jsx

Question

I have an object like this

const myObject ={
2: {id: 2, name: "Lori Kreiger Jr.", email: "[email protected]", avatar: null, gender: "m"}
3: {id: 3, name: "Kurt Yost", email: "[email protected]", avatar: null, gender: "f"}
4: {id: 4, name: "Norene Hilpert", email: "[email protected]", avatar: null, gender: "m"}
5: {id: 5, name: "Crawford Pouros:,  email: "[email protected]", avatar: null, gender: "m"}
}

and an array containing the ids that i will have to filter from this object

const myArray = [2,5];

In the React code i want to loop through myObject filtering it by ids that i have on myArray and passing its values to my component

<ListView id={id} name={name} email={email} ...etc />

How can i achieve this?

In this case, you may use an Array to store these items instead of Object because all of them has same structure and your keys are non-sense. — Pylon
– Pylon, Commented Jul 20, 2020 at 8:24
@Pylon It's a redux principle so i try to follow them. redux.js.org/recipes/structuring-reducers/… — Besart Marku
– Besart Marku, Commented Jul 20, 2020 at 9:27

GirkovArpa · Accepted Answer · 2020-07-19 22:55:22Z

2

This is how you filter myObject:

Object.values(myObject).filter(({ id }) => myArray.includes(id));

Here's a live example:

'use strict';

const myObject = {
  '2': { id: 2, name: "Lori Kreiger Jr.", email: "[email protected]", avatar: null, gender: "m" },
  '3': { id: 3, name: "Kurt Yost", email: "[email protected]", avatar: null, gender: "f" },
  '4': { id: 4, name: "Norene Hilpert", email: "[email protected]", avatar: null, gender: "m" },
  '5': { id: 5, name: "Crawford Pouros:",  email: "[email protected]", avatar: null, gender: "m"}
}

const myArray = [2, 5];

const result = Object.values(myObject).filter(({ id }) => myArray.includes(id));

console.log(result);

answered Jul 19, 2020 at 22:55

GirkovArpa

5,1015 gold badges19 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Unmitigated · Accepted Answer · 2020-07-19 23:02:58Z

1

Use a Set for better performance, as it can perform lookups in O(1) time.

const myObject ={
2: {id: 2, name: "Lori Kreiger Jr.", email: "[email protected]", avatar: null, gender: "m"},
3: {id: 3, name: "Kurt Yost", email: "[email protected]", avatar: null, gender: "f"},
4: {id: 4, name: "Norene Hilpert", email: "[email protected]", avatar: null, gender: "m"},
5: {id: 5, name: "Crawford Pouros:",  email: "[email protected]", avatar: null, gender: "m"}
}
const myArray = [2,5];
const set = new Set(myArray);
const res = Object.values(myObject).filter(obj=>set.has(obj.id));
console.log(res);

answered Jul 19, 2020 at 23:02

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

Comments

JBallin · Accepted Answer · 2020-07-19 23:23:06Z

Filter the Object values to get an Array of the desired values
Map the filtered values to be a list of React elements and pass the relevant props

Here's a simplified example:

const MY_OBJECT = {
  2: {
    id: 2,
    name: "Lori Kreiger Jr.",
    email: "[email protected]",
    avatar: null,
    gender: "m"
  },
  3: {
    id: 3,
    name: "Kurt Yost",
    email: "[email protected]",
    avatar: null,
    gender: "f"
  },
  4: {
    id: 4,
    name: "Norene Hilpert",
    email: "[email protected]",
    avatar: null,
    gender: "m"
  },
  5: {
    id: 5,
    name: "Crawford Pouros",
    email: "[email protected]",
    avatar: null,
    gender: "m"
  }
};
const MY_ARRAY = [2, 5];

const ListView = ({ id, name }) => <li>{name}</li>;

const App = () => {
  const filteredList = Object.values(MY_OBJECT).filter(e => MY_ARRAY.includes(e.id));

  return (
    <div>
      <h1>My List</h1>
      <ul>
        { filteredList.map(l => <ListView name={l.name} key={l.id} />) }
      </ul>
    </div>
  );
 };

ReactDOM.render(<App />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Shivang Gupta · Accepted Answer · 2020-07-20 08:16:39Z

Simple approach will be iterating to your filter list. Consider below functional component:

const MY_OBJECT = {
  2: {
    id: 2,
    name: "Lori Kreiger Jr.",
    email: "[email protected]",
    avatar: null,
    gender: "m"
  },
  3: {
    id: 3,
    name: "Kurt Yost",
    email: "[email protected]",
    avatar: null,
    gender: "f"
  },
  4: {
    id: 4,
    name: "Norene Hilpert",
    email: "[email protected]",
    avatar: null,
    gender: "m"
  },
  5: {
    id: 5,
    name: "Crawford Pouros",
    email: "[email protected]",
    avatar: null,
    gender: "m"
  }
};
const MY_ARRAY = [2, 5];
const ListView = ({ id, name }) => <li>{name}</li>;
const App = () => {
  
return (
    MY_ARRAY.map(val => {
        const { id, name } = MY_OBJECT[val];
        return (
            < ListView id={id} name={name} />
        )
    })

)
 };

ReactDOM.render(<App />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Collectives™ on Stack Overflow

filter values of an object by keys given from an array and render them in jsx

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related