Angular array issue

JavaScript
1

Hello,

How do i go about accessing specific values from the array below:

I tried:
value1 = array[0].lastName or value2 = array[1].city. produces nothing, what am I doing wrong?

[ { “firstName”: “Bruce”, “lastName”: “Wayne”, “superHero”: “Batman”, “age”: “45” },
{ “address”: “45 Green St”, “city”: “New York”, “Car”: “Focus”, “color”: “Green” }
]

any help you can provide would be greatly appreciated.
Thanks

2

That by itself would work fine, but what’s the Angular-specific issue here? Do you mean inside a template?

4

Hi m3g4p0p,

Thanks for the reply back.

After having done some research I was able to display the values in the template as such:
{{ this.array && this.array[0].lastName}} and this works but not sure how it works but it does work. Founded in a post somewhere.

{{ this.array && this.array[0].lastName}} , this works within the template but now i need to assign the array value to a variable to work with but simply doing testValue = this.array[0].lastName does not work.

I am using the new httpclient class to retrieve data not sure if that matters.

5

I’d really need to see some more code to help you with that… not necessarily the entire component, but the part where the array gets populated, where the testValue gets assigned etc. Or maybe you could provide a stackblitz mini-app with just the relevant code?

6

If you temporarily do something like

console.log(typeof the-json-array);
console.log(typeof the-json-array[0]);
console.log(typeof the-json-array[0].lastName);

do you see string or object?

7

Thinking about it, that might indeed be the problem. Of course you can’t access elements of an array that is yet to be defined, hence the need for that array && array[0].lastName check (no need for the this though, that’s implicit within the template). Such a check utilises the short-circuit evaluation and is a common pattern in JS. Similarly, you can only assign elements of that array to another variable after the array got actually populated, i.e. from within the http subscription

8

Hi m3g4p0p,

I checked out stackblitz and its awesome, thanks. Nice little tool for sharing code with someone.

I created two files and basically copy/pasted the relevant code. My codes aren’t too complicated to start with still at the learning stage :slight_smile: :
app/test.component.ts
app/test.service.ts

link to the sample code and hope it works.

Thanks
r

9

Hi Mittineague,

Thanks for the reply back.

This is what I’m getting:

console.log(typeof returnArray); // received object
console.log(typeof returnArray[0]); // received object
console.log(typeof returnArray[0].lastName); // received undefined

10

Isn’t it. :-) Anyway, the problem is that you’re doing the assignment right in the ngOnInit() method while the HTTP request is still pending:

ngOnInit(){ 
  this.​getUserInformationMethod(this.testValue);
  
  // this will never be true
  if (this.returnArray){ 
    this.userName = this.returnArray[0].lastName;
  }      
}

Remember, the first A in AJAX stands for “asynchronous”… so you’ll have to do this assignment in the success callback of the service:

getUserInformationMethod(testValue) {       
  this._httpService.getUserDetailsMethod(testValue).subscribe( 
    data => { 
      this.returnArray = data;
      this.userName = data[0].lastName
    },
    this.errorHandlingMethod  
  );
}
1 Like
11

Thanks M3g4p0p,

I played with your suggestions and it did clear up a lot. thanks again.

I terms of handling values like this ->: returnArray && returnArray[0].lastname.

I have a formBuildingMethod() which gets called from ngOnInit and it does what it does and pulls values from returnArray and populates the form.

how can i separate the code so that I can use returnArray[0].lastname instead of returnArray && returnArray[0].lastname.

modified the stakblitz little to reflect the above post.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.