I have this problem. I want to render the assigned user's username, based on what the customer id is.
It technically works, but doesn't work how i want it to work.
There's the assigned users object:
"assigneduser": [
{
"user_id": 1,
"customers_id": [
2
],
"username": "testuser"
},
{
"user_id": 2,
"customers_id": [
3,
4
],
"username": "filanfisteku"
}
]
I'm filtering assigned users based on the customers_id:
let assigneduserfilter = Object.values(assigneduser).filter(
({ customers_id }) => customers_id == i.id // i is the customers map
);
And then mapping assigneduserfilter:
{assigneduserfilter.map((z) => (
<td key={z.customers_id}>{z.username}</td>
))}
How can i render the assigned user username on the relevant customer table row?
Thats pretty simple, so assuming you have an array of objects as follows
const arr = {
assigneduser: [
{
user_id: 1,
customers_id: [2],
username: "testuser",
},
{
user_id: 2,
customers_id: [3, 4],
username: "filanfisteku",
},
],
};
You would proceed by creating a function to find your customer as seen below.
const assgnedUserFilter = (user) => {
return arr.assigneduser.find((u) => u.customers_id == user);
};
Then call the function with the customer_id you want to find. Then manually map the values to your HTML.
const selectedCustomer = assgnedUserFilter(2);
<p id="customer_id">{selectedCustomer.customer_id}</p>
<p id="username">{selectedCustomer.username}</p>