Filtering a List based on text input

I’m trying to build something in React that filters a list based on what the user types into an input box.

It’s making 2 types of API calls; the first type retrieves a list of items. The second type retrieves info about the user. Sofar I have it displaying the entire list of items, and based on user_id it retrieves info about the user when each item loads.

The problem is I need to filter by user name. And the list of items doesn’t have the user name.

… any suggestion how to do this? I’m flummoxed, I’ve spent about 5 hours trying to figure it out.

Where is the username stored in the data? Do you have a sample of data retrieved back from each API call? When the user enters something in the input box, what are you searching against to display the results?

Items API call - /all:

{
  "items": [
    {
      "deadline": 1570384257, 
      "description": "Text", 
      "id": "12345678", 
      "name": "Item 12345678", 
      "userId": 0
    }, 
    {
      "deadline": 1570287727, 
      "description": "Text", 
      "id": "98765432", 
      "name": "Item 98765432", 
      "userId": 1
    }
  ]
}

Username API call - /user/3

{
  "user": {
    "bio": "Text", 
    "email": "123@fake.st", 
    "id": 3, 
    "image": "https://www.medicalnewstoday.com/content/images/articles/326/326253/corgi-and-terrier-running.jpg", 
    "name": "John Smith"
  }
}

What are you searching against to display the results? That’s part of the problem. Each time I map out a new item, I make a call to the Users endpoint and grab their data.

So you want a user to enter a name like “John Smith” into the input box and then show a list of items which match John Smith’s userID (1)? I may be misunderstanding what you are trying to accomplish. It would be helpful to see the code you have written so far and any further explanation of what you are wanting to display to the user upon the user entering information in to the input box.

Another question: Did you create the end points or do you only have access to make GET calls to them?

Yes, that’s exactly what I’m trying to do! Typing in “Do” would only show items belong to Donald, Doug, Doris, etc.

I’m coding in React so my code is spread over several files ATM. Also I started rearranging things so a lot of it is commented out.

In psuedocode:

App.js

componentDidMount() {
	calls /items endpoint
		saves all itemOrders to state.
			() => {
				items.map(item => {
					calls /user/id endpoint
						itemOrders.userData = [response.data.user]
					})
				}
Passes itemOrders into the ItemOrders component.

ItemOrders.js

render() {
	jsonElements = this.props.itemOrders.map(
		(elem, id) => <ItemComponent itemOrders = {elem} />
	}
render() {
	<>
		jsonElements
	</>
}

–This maps over each itemOrder, and renders a new component.
–I think I need to put a filter here that only renders based on the search text input?

ItemComponent.js

return {
	<article>
		<h2>{itemOrders.name}</h2>
		<p>{itemOrders.description}</h2>
		<p>{itemOrders.userData.name}</p>
		<p>etc...</p>
	</article>
	}

Yes, I only have access to the API endpoints. I can’t modify them.

I figured out the filter, but now I have another problem:

After the second call to the endpoint, I’m trying to add the userData onto state.ItemOrders. This gets passed down to itemComponents, but it’s causing an error.

It says the ItemOrders.userData is undefined in console, & causes a crash if I try to use it. But after the page loads I trigger a console, & the data is really there. For whatever reason, it’s rendering the page before the data arrives.

When your first API call returns a user, grab the id and then instead of using map (with the data from the second API call) use the filter method and filter each item using the id by comparing id to userId.

It would really help to see your entire project to better understand how you have everything setup.