Kevin Powell - Community•6mo ago

How to filter specific key + values in Javascript

I am working with the swapi API. I want to return an object but only specific entries. For example; Obj = { name: "Luke", age: 10, gender: "male"} But I specifically want to return a new object which is the name and gender with it's key name and value. My goal is to return them into a table but possibly have the option to have advanced filter. So user can return for name and age or more entries.

10 Replies

MarkBoots•6mo ago

const results = people.filter(person => person.age === 10 && person.gender === 'male');

const results = people.filter(person => person.age === 10 && person.gender === 'male');

this returns an array of person objects that match the criterea

big saf 🍉OP•6mo ago

I'm not sure, I don't want the gender male and want the results of the key gender So not just the values but it's actually key so I can print the key in a table header

MarkBoots•6mo ago

please give me an example of the data you have and the result you want

big saf 🍉OP•6mo ago

 {
    "birth_year": "19 BBY",
    "eye_color": "Blue",
    "films": [
        "https://swapi.dev/api/films/1/",
        ...
    ],
    "gender": "Male",
    "hair_color": "Blond",
    "height": "172",
    "homeworld": "https://swapi.dev/api/planets/1/",
    "mass": "77",
    "name": "Luke Skywalker",
    "skin_color": "Fair",
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-10T13:52:43.172000Z",
    "species": [
        "https://swapi.dev/api/species/1/"
    ],
    "starships": [
        "https://swapi.dev/api/starships/12/",
        ...
    ],
    "url": "https://swapi.dev/api/people/1/",
    "vehicles": [
        "https://swapi.dev/api/vehicles/14/"
        ...
    ]
}

 {
    "birth_year": "19 BBY",
    "eye_color": "Blue",
    "films": [
        "https://swapi.dev/api/films/1/",
        ...
    ],
    "gender": "Male",
    "hair_color": "Blond",
    "height": "172",
    "homeworld": "https://swapi.dev/api/planets/1/",
    "mass": "77",
    "name": "Luke Skywalker",
    "skin_color": "Fair",
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-10T13:52:43.172000Z",
    "species": [
        "https://swapi.dev/api/species/1/"
    ],
    "starships": [
        "https://swapi.dev/api/starships/12/",
        ...
    ],
    "url": "https://swapi.dev/api/people/1/",
    "vehicles": [
        "https://swapi.dev/api/vehicles/14/"
        ...
    ]
}

big saf 🍉OP•6mo ago

big saf 🍉OP•6mo ago

Example currenlt in my react app, i search for the characters name, "luke" which will render a table with luke skywalker in the name column and other properties in the object in api How do i only return specific columns? the user does not need to see all the object properies as that would be a big table (over scrolling etc) @MarkBoots

big saf 🍉OP•6mo ago

https://github.com/Saf98/SWAPI-ReactJS/blob/feature/refactor-table-filter/src/components/Results.jsx

GitHub

SWAPI-ReactJS/src/components/Results.jsx at feature/refactor-table-...

Contribute to Saf98/SWAPI-ReactJS development by creating an account on GitHub.

big saf 🍉OP•6mo ago

cuurent code

MarkBoots•6mo ago

const filtered = array.map(entry => {
  const { name, office } = entry; /* deconstruct the object's specific keys */
  return { name, office } /* return an object with only those key/value pairs */
}

const filtered = array.map(entry => {
  const { name, office } = entry; /* deconstruct the object's specific keys */
  return { name, office } /* return an object with only those key/value pairs */
}

big saf 🍉OP•6mo ago

i forgot all about destructering Thank you! Well that would be the same hard coding, i think what I should do is to render everything and hide them using css That's anyway I appreciate it

Gaming

Programming

How to filter specific key + values in Javascript