How to exclude key in object with map

Question

I have an object

{
   id: 10, 
   email: "test@gmail.com", 
   roles: Array(1), 
   firstName: "toto", 
   lastName: "tata"
}

I would like to display only test@gmail.com, toto, tata and exclude id and role

So I did this but I don't know how to exclude id and role. I tried with filter but it's not working.. Does anyone know how to do that?

const datas = Object.entries(data).map(([key, value]) => {
   return (
      <div key={key.id}>
         <p>
            {value}
         </p>
      </div>
   );
});

`filter` should just work as intended. How is it not working? — briosheje, Jul 22 '20 at 11:50
Does this answer your question? [Filter object properties by key in ES6](https://stackoverflow.com/questions/38750705/filter-object-properties-by-key-in-es6) — Eggcellentos, Jul 22 '20 at 11:56

Emre Koc · Accepted Answer · 2020-07-22T12:02:56.923

3

Use filter to filter out the ones you dont want:

const datas = Object.entries(data)
  .filter(([key]) => key !== 'id' && key !== 'role')
  .map(([key, value]) => {
    return (
      <div key={key.id}>
        <p>
          {value}
        </p>
      </div>
    );
  });

edited Jul 22 '20 at 12:02

answered Jul 22 '20 at 11:50

Emre Koc

1,481
10
18

2

With a little shorter syntax `.filter(key => !['id','role'].includes(key))` – Jax-p Jul 22 '20 at 11:58
Thanks for your answer but it still displays id and role :/ – askemeline Jul 22 '20 at 12:00
Corrected the filter; should have used `([key])` to get the key. – Emre Koc Jul 22 '20 at 12:03

Deykun · Answer 2 · 2020-07-22T12:04:09.467

It is a good place to use Array.filter, but if you know which fields you want to show and there are only three you can do it like this:

  const { email, firstName, lastName } = data;

  return (
    <div>
      <p>
        {email}
      </p>
    </div>
    <div>
      <p>
        {firstName}
      </p>
    </div>
    <div>
      <p>
        {lastName}
      </p>
    </div>
   );

The key is not needed. Also I'm not sure if key.id is a valid parameter here, I think that we are receiving a string, not an object from the Object.entries array.

The approach I showed is more descriptive, does not use a loop and it is easier to add <a> for an email or put full name (first and last name) in one <h1> HTML tag.

How to exclude key in object with map

2 Answers2