How can I fetch objects from an array from an array which match an array of id's?

Question

How can I fetch objects from an array from an array which match an array of id's? Is this possible? I'd ideally like to grab only the ones that I need, rather than fetching objects that I don't need and then filtering them as this seems not very performant.

const objects = [
 {
  id: "1", 
  name : "one",
 },
 {
  id: "1", 
  name : "two"
 },
 {
  id: "3", 
  name : "three",
 },
 {
  id: "4", 
  name : "four"
 },
 {
  id: "5", 
  name : "five"
 }
]

const ids = ['1', '3', '5'];
let myFilteredObjects = await fetch('./objects');
// myObjects should return and an array of objects with 1, 3, 5

"from an array from an array"? Huh? Also is that fetch statement supposed to be a quoted string? it's not valid JavaScript syntax because of `fetch(./objects)`. Maybe you're just looking for `.filter` and `.includes`? e.g.: `objects.filter(obj => ids.includes(obj.id)` — Wyck, May 01 '21 at 02:47
My mistake, sorry I've now added a quote around where to fetch from :) @Wyck — DumbDevGirl42069, May 01 '21 at 02:58
Another nitpick. You wrote _`myObjects` should return..._ but I think you either meant _myFilteredObjects should contain_ or _fetch should return_. Also, if `fetch` is intended to be some unknown function of your own creation that performs this function, beware that many readers will confuse it for the [`fetch` function from the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). — Wyck, May 01 '21 at 03:01
After reading this more carefully it looks like you are hoping for _server-side filtering_ of the results. If you are accessing a REST API, perhaps the API supports such filtering by providing a query string? If not, then you'll have to client-side-filter the results you do get, exactly as you suspect. You're right to presume that client-side filtering is less performant than server-side filtering. But JavaCcript `.filter` of results you've already received should not make things worse than they already are. — Wyck, May 01 '21 at 03:05
Ah I do mean fetch function from the fetch api. I mean if this array was an endpoint. I want to fetch the objects in the array that match the id's in the array. Rather than fetching all of them and filtering. Example that these objects may have relational data and it was be not performant to fetch everything and filter this out on the frontend. I'm not sure if that makes sense :) — DumbDevGirl42069, May 01 '21 at 03:05
@Wyck Just saw your last comment, thank you. Sorry I'm unsure how to articulate that very well but this is exactly the question i'm asking :) — DumbDevGirl42069, May 01 '21 at 03:06
Filtering, sorting and pagination are excellent server-side features of the particular REST API you are using. Do you have control over the backend too? See [this answer](https://stackoverflow.com/questions/5020704/how-to-design-restful-search-filtering) Beware that `fetch` itself does not magically add a server-side or client-side filtering feature to a REST API. Expect to have to provide a query string in the URL with the details of the filter. — Wyck, May 01 '21 at 03:08

score 1 · Answer 1 · answered May 01 '21 at 04:32

If I get it right you want to send only the list of ids and receive only the matching objects.

search for "MDN fetch", "MDN array filter", "MDN array find"

With fetch you actually do a combination of request/response to/from a backend. So basically you want to send the "ids" of interest to an url, let the backend do the filtering and get the objects that match in the response.

backend (if implemented with javascript) could return:

objects.filter(obj => ids.includes(obj.id))

or:

objects.filter(x => x.id === ids.find(y => y === x.id))

Note: the name "id" is probably not the best choice as it usually is used for a unique relation, meaning if you input an id somewhere it should only return one value (search "wiki ID")

How can I fetch objects from an array from an array which match an array of id's?

1 Answers1