An entity which is defined as —> list : any = [ ]; and then filled with data (JSON objects) is an array list, right?
I try to copy the values with a for loop to another entity which is defined in the same way, also implement pop method to remove the last element, but the new entity is empty. Any ideas? Thank you.
Can you share your code here?
I successfully get json data from the woocoomerce site with this code in the constructor of the app.component.ts
categories : any = [];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public api:ApiService)
{
let temp:Observable<any> = this.api.get('products/categories');
temp.subscribe(result => {this.categories = result, console.log(this.categories)});
this.initializeApp();
}
after making a service
type or paste code here
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
@Injectable({
providedIn: 'root'
})
export class ApiService {
private API_URL:string = 'site with json data';
constructor(public http: HttpClient) {
console.log('This is the Api Service');
}
get(query:string = '') {
return this.http.get(this.API_URL + query);
}
}
My problem is that the json object array of the categories from the woocommerce site had a category named “uncategorized”, which I wanted to remove from the array.
So I did
this.categories.pop();
and
for (let i=0 ; i<this.categories.length -1 < i++ ) {
this.newArray[i] = this.categories[i];
}
//where newArray above the constructor
newArray : any = [];
And I had no luck with removing the last object of the array. I had to remove this category from the back-end so as not to be retrieved.
.pop() should be removing the last element from your array. Instead of copying your array through a for loop, the easiest was to copy data would be this.newArray = [...this.categories]; Where is that part of the code happening?
I tried both of them (pop method and copy all the array elements except the last one) inside the constructor of app.component.ts. “this.categories” contains all the fetched data but I am unable to remove elements or process the array. Even after copying the this.categories to “categories.newArray”, the latter contains no data (!).
Is it a matter of imported packages?
I have imported
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { ApiService } from './api.service';
import { Observable } from 'rxjs';
in app.component.ts.
Are you manipulating the data after you set it inside of your subscription or somewhere else?
Just after the subscription.
You’ll have to do it inside the subscription handler. Otherwise there’s no guarantee the array will be populated since it’s asynchronous data
1 Like
Please consider this example
export class ProductsByCategory implements OnInit {
category: any;
products: any [];
ps: any [];
constructor(public api:ApiService, private route: ActivatedRoute) {
}
ngOnInit() {
this.category = this.route.snapshot.paramMap.get('category');
let d:Observable<any> = this.api.get('products');
d.subscribe(result => { this.ps = result; console.log(this.category); for (let x of this.ps) {
if (x.categories[0].name === this.category) {
this.products.push(x);
}
}});
}
}
I pass the parameter category to this page when a button is clicked. Then I want to filter the received json data by category name so as to display only the products with the particular category name which is passed to the ProductsByCategory class. So I fetch the products again and filter the products inside subscription.
And the error I get:
ERROR TypeError: "this.products is undefined"
ngOnInit products-by-category.page.ts:28
RxJS 11
Angular 8
It seems that the fetched array cannot be processed outside subscription, but no array can be extracted outside the subscription! That is, copy the value of the processed array to a class variable,
Ok thank you, I had to declare this.products array again in the subscription…
category: any;
products: any [];
ps: any [];
constructor(public api:ApiService, private route: ActivatedRoute) {
}
ngOnInit() {
this.category = this.route.snapshot.paramMap.get('category');
let d:Observable<any> = this.api.get('products');
d.subscribe(result => { **this.products = []**, this.ps = result; console.log(this.category); for (let x of this.ps) {
if (x.categories[0].name === this.category) {
this.products.push(x);
}
}});
}
1 Like