Having a JSON file containing a list of properties for sale, I am attempting to utilize *NgFor to iterate through the data and generate a list.
Being relatively new to Angular and app development, there's a possibility that I might have misunderstood some documentation or concepts.
I've experimented with looping through different paths:
*NgFor="let post of posts.properties"
*NgFor="let post of posts.properties.property"
But, I'm still encountering various errors.
My understanding is that I need to cast the observable to an array of properties and then bind it to the HTML. (I believe I've already done this since 'properties' is of type array?)
Here's a snippet of the JSON data:
{
"properties": {
"property": [
{
"propertyID": "101552000007",
"branchID": "1",
"clientName": "A Demo",
"branchName": "Brackley",
"department": "Sales",
"referenceNumber": "10006",
"addressName": "",
"addressNumber": "87",
"addressStreet": "Hackney Road",
And here's the 'properties.interface.ts' file:
export interface IProperties {
addressStreet: string;
addressNumber: number;
}
The 'for-sale.service.ts' file looks like this:
import { IProperties } from './../properties.interface';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ForSaleService {
constructor(private http: HttpClient) {}
getProperties(): Observable<IProperties[]> {
return this.http.get<IProperties[]>('/assets/data/jupix.json');
}
}
And now we have the 'for-sale.page.ts' file:
import { ForSaleService } from './for-sale.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-for-sale',
templateUrl: './for-sale.page.html',
styleUrls: ['./for-sale.page.scss'],
providers: [ForSaleService]
})
export class ForSalePage implements OnInit {
public properties = [];
constructor(private saleService: ForSaleService) {}
ngOnInit() {
this.onGetProperties();
}
onGetProperties() {
this.saleService.getProperties()
.subscribe(response => {
console.log(response);
this.properties = response;
});
}
}
Lastly, the HTML part:
<ion-content>
<ion-list *ngFor="let property of properties">
<ion-card>
<ion-card-header>{{ property.addressNumber }}</ion-card-header>
<ion-card-content>
<p>
<ion-icon name="person" color="primary"></ion-icon>
</p>
</ion-card-content>
</ion-card>
</ion-list>
</ion-content>
I seem to be facing issues with binding 'let property of properties' to the array of properties?
UPDATE: Despite trying out a few suggestions, a consistent error pattern seems to be emerging in the console log? It appears to be recognizing child elements as undefined, leading to these errors?
To make things clearer, I changed the variable completely to 'propertiesList.'
A strange occurrence is happening now.
When using
*ngFor="let property of propertiesList.properties.property"and for the card image
<img src="{{ property.images.image[0].__text }}" alt="">
Cannot read property '__text' of undefined" Cannot read property 'property' of undefinedContinuing to add other elements in the HTML:
<ion-card-header>{{ property.addressNumber }} {{ property.addressStreet }} {{ property.addressPostcode }}</ion-card-header>These sections are working fine without any errors, displaying the data properly. But something interesting occurs next.
<p>{{ property.propertyFeature1 }} {{ property.floorplans.floorplan._modified }}</p>Adding this piece, the error
Cannot read property '__text' of undefinedCannot read property '__modified' of undefinedCannot read property 'property' of undefinedIn Visual Studio Code, the only error I'm receiving is
Identifier 'properties' is not defined. 'Array' does not contain such a member