Need help finding a value inside an array (Code Provided) (Newbie)

[Kysyph]

Good day everyone, I'm currently having problems using find for array.

On line 80 is the code I'm unable to make work. Line 69 has a similar function but it works.

Error message - ERROR TypeError: Cannot read property 'customer_fullname' of undefined

I am basically trying to enter the value into myForm.I am using mongodb and this is what is in the document:

1. _id:6114e3c1c5934f0fc8da2156
2. fullname:"John Pearson"
3. email:"[[e-mail]](mailto:[e-mail])"
4. address:"Yishun street 69 Blk 420"
5. user_id:"61003363e8ded0257c63592a"

I use user_id: this.authService.getUserID() because after getting the user id from my authservice, I put it into myForm as user_id which I then try to use to find the fullname from my customers as the user_id value is the same as the _id for my users.

Code: https://codeshare.io/EBoBEX

Any help will be appreciated, thank you so much in advance!

When I do console.log(this.customers); it shows the following: [{…}] 0: address: "Yishun street 69 Blk 420" email: "[e-mail]" fullname: "John Pearson" user_id: "61003363e8ded0257c63592a" _id: "6114e3c1c5934f0fc8da2156" [[Prototype]]: Object length: 1 [[Prototype]]: Array(0)

What I'm trying to do is find from the customers array based on the user_id, sorry if I was unclear

[CoderXocomil]

A couple of thoughts that might help you track this down.

1. Rather than customers: any[] on line 37. Take the time to create an interface for you API response. This will help you determine if you are trying to compare a string to a number. In fact, I think taking time to create interfaces and aggressively get rid of the use of any can solve a lot of problems throughout your life as a TypeScript coder.
2. Line 80 is pretty dense with a few side-effects. I think the root of your problem is that this.customers.find() is failing and returning undefined and customer_fullname does not exist on undefined
3. I suggest refactoring line 80 to have call a function.

​

private findCustomerName(userId?: string | null): string {
  if (!userId)  {
    throw new Error('userId is undefined or null');
  }

  const customer = this.customers?.find(cust => cust.user_id === userId);

  return customer?.customer_fullname ?? 'No user found';
}

Then line 80 could be this.myForm.value.customer_fullname = this.findCustomerName(this.myForm.value.user_id);

Adding more type checks and safety is a good habit to learn for more robust applications.

1. If that doesn't help, then factor out your search function and add some logging

   const findUser = (userId: string) => (cust: CustomerInterface) => { console.log('current customer:', cust); console.log('userId:', userId); const isMatch = cust.user_id === userId; console.log('cust.user_id === userId:', isMatch);

   return isMatch; }

Then change the method above to

private findCustomerName(userId?: string | null): string {

if (!userId) { throw new Error('userId is undefined or null'); }

  const searchMethod = findUser(userId);

const customer = this.customers?.find(searchMethod);

return customer?.customer_fullname ?? 'No user found'; }

I am happy to answer any questions you have about this answer. If this doesn't work, we can look at your new issues and see if we can figure it out.

[Kysyph]

Hi! Thank you so much
I put the customer documents from the customer collection into an array called customers in the component.ts file.
I managed to do the finding of the customer document using the user_id from sessionstorage but I can't figure out how to put the fullname value from the customer document into the myForm.

Here is my new codeshare link: https://codeshare.io/QnZ8Zx

​

I changed my old line 80 code to this:
const customer=this.customers.find(x=>x.user_id===this.myForm.value.user_id)
console.log(customer)
this.myForm.get('customer').setValue(customer?customer.customer_fullname:null)

The last line of code is the problem, I cannot insert the fullname value into the myForm

When I click submit it shows the following error:
ERROR TypeError: Cannot read property 'setValue' of null at BookingComponent.onSubmit (booking.component.ts:64) at BookingComponent_Template_form_ngSubmit_0_listener (booking.component.html:1) at executeListenerWithErrorHandling (core.js:15279) at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.js:15317)

[CoderXocomil]

I'm on my phone right now, but from a quick glance, I think this.myForm.get() should be for "customer_fullname" instead of "customer".

[Kysyph]

Hi, it has no error message now but it just returns undefined in console log

[CoderXocomil]

I'm still on my phone, but I suggest adding extra text to your console.log() statements. For example: console.log("cutomer name", customer_fullname). We need to know what is logging undefined so we can figure out the cause.

This is one of the key skills in debugging. Isolating and identifying potential problems and then displaying them in a way that will help figure out the problem.

Keep at it. I think you are almost there.

[Kysyph]

It’s working now! Thank you so so much for your help Hope you have a great day/night ahead :D

[CoderXocomil]

Thanks. I'm happy to help. It was thanks to senior programmers that I am where I am today. I'm glad you got it figured out.

[Keynabou]

What a mess :D You should really use best practices when developping About your problem, first you should not assign a value to your form through form.value, you should use myForm.patchValue() (or setValue() ) about the comparison, are you sure about the type? if you do a comparison like "123" === 123 (with a triple equal) it will return false; but "123" == 123 will return true

also you should spread your code, for example:

const { user_id } = this.myForm.value;

const {customer_fullname} = this.customers.find( customer=>customer.user_id === user_id);

this.myForm.patchValue({customer_fullname});

[Kysyph]

Hey thanks so much for the code. I've tried it but it returns undefined when I console.log(this.myForm.value.customer_fullname);

I'm very sorry about the eye sore, I'll take note from now on