We Keep Coding

Empty response when trying to fetch mock data from Service

I want to fetch and display data from Array of Objects.
I have created the parameterized routes.
1. app-routing.module.ts
const routes: Routes = [
{
path: 'all-trades',
component: AllTradesComponent,
},
{
path: 'crop/:name', component: CropComponent
}]
2. Crop.ts
export class Crop {
name: string;
checked: boolean;
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
isActive: boolean;
}
3. CropData.ts
Here is my Array of object, I want to access subCategory and display the name on webpage.
for example: When user click on Rice then its should get the result like 'Basmati', 'Ammamore'
OR
When user click on Wheat then its should get the result like 'Durum', 'Emmer'
OR
When user click on Barley then its should get the result like 'Hulless Barley', 'Barley Flakes'
import { Crop } from './Crop';
export const CROP: Crop[] = [
{
name: 'Rice',
checked: true,
subCategory: [
{
id: 1,
name: 'Basmati',
isActive: true,
},
{
id: 2,
name: 'Ammamore',
isActive: true,
},
],
},
{
name: 'Wheat',
checked: true,
subCategory: [
{
id: 1,
name: 'Durum',
isActive: true,
},
{
id: 2,
name: 'Emmer',
isActive: true,
},
],
}, {
name: 'Barley',
checked: true,
subCategory: [
{
id: 1,
name: 'Hulless Barley',
isActive: true,
},
{
id: 2,
name: 'Barley Flakes',
isActive: true,
},
],
}
]
4.1 crop.service.ts
// First I tried this logic
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
import { skipWhile } from 'rxjs/operators';
import { Crop } from '../shared/Crop';
import { CROP } from '../shared/cropdata';
#Injectable({
providedIn: 'root'
})
export class CropService {
constructor() { }
CropData: Crop
getCrop(name: string): Crop {
return this.CropData.filter((crop) => (crop.name === name))[0];
}
}
4.2 crop.service.ts
// Then I tried this logic
export class CropService {
private selectedCrop= new BehaviorSubject<Crop>(null);
setCrop(crop:Crop){
this.selectedCrop.next(crop);
}
getCrop(){
this.selectedCrop.asObservable().pipe(skipWhile(val=> val === null));
}
}
I failed in both the cases.
5.1 all-trades.components.ts
// First tried using function
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import { Crop } from 'src/app/shared/Crop';
import { CropService } from '../crop.service';
#Component({
selector: 'app-all-trades',
templateUrl: './all-trades.component.html',
styleUrls: ['./all-trades.component.css'],
})
export class AllTradesComponent implements OnInit {
constructor(private service: CropService, private router: Router) { }
// Here I tried to make use of function but still its doesnot giving me the desire result
onSelect(selectedCrop:Crop){
this.service.setCrop(selectedCrop);
this.router.navigateByUrl(`crop/${crop.name}`);
}
onChange(event, index, item) {
item.checked = !item.checked;
console.log(index, event, item);
}
ngOnInit(): void { }
}
5.1 all-trades-component.html
<app-header></app-header>
<div
fxLayout="row"
fxLayout.lt-md="column"
fxLayoutAlign="space-between start"
fxLayoutAlign.lt-md="start stretch"
>
<div class="container-outer" fxFlex="20">
<div class="filters">
<section class="example-section">
<span class="example-list-section">
<h1>Select Crop</h1>
</span>
<span class="example-list-section">
<ul>
<li *ngFor="let crop of crops">
<mat-checkbox
[checked]="crop.checked"
(change)="onChange($event, i, crop)"
>
{{ crop.name }}
</mat-checkbox>
</li>
</ul>
</span>
</section>
<div class="content container-outer" fxFlex="80">
<mat-card
class="crop-card"
style="min-width: 17%"
*ngFor="let crop of crops"
[hidden]="!crop.checked"
>
<!-- here i call the function -->
<a (click)="onSelect(crop)" routerLinkActive="router-link-active">
<mat-card-header>
<img
mat-card-avatar
class="example-header-image"
src="/assets/icons/crops/{{ crop.name }}.PNG"
alt="crop-image"
/>
<mat-card-title>{{ crop.name }}</mat-card-title>
<mat-card-subtitle>100 Kgs</mat-card-subtitle>
</mat-card-header>
</a>
<mat-card-content>
<p>PRICE</p>
</mat-card-content>
</mat-card>
</div>
</div>
<app-footer></app-footer>
crop-componet.ts
import { Component, OnInit } from '#angular/core';
import { Subscription } from 'rxjs';
import { Crop } from 'src/app/shared/Crop';
#Component({
selector: 'app-crop',
templateUrl: './crop.component.html',
styleUrls: ['./crop.component.css']
})
export class CropComponent implements OnInit {
service: any;
crop: any;
route: any;
cropservice: any;
sub: Subscription;
constructor() { }
ngOnInit(): void {
// let name = this.route.snapshot.params['name'];
// this.crop = this.cropservice.getCrop(name);
this.sub = this.route.paramMap.subscribe(params => {
let name = params.get("name")
this.crop = this.cropservice.getCrop(name)
})
}
}
7. crop-component.html
<div *ngFor="let category of crop.subCategory">{{category.id}}</div>
This is my eniter code I dont know where I am going wrong please help in fetching data from arrays of object.
[![enter image description here][1]][1]
This is my all-trades.component.html output
When I click Rice I get this as output (Url get change )
[![enter image description here][2]][2]
When I click Wheat I get this
[![enter image description here][3]][3]
And so on....
I just want to display the name of subCategory Array.
Please give me the solution.
[1]: https://i.stack.imgur.com/kxdyj.png
[2]: https://i.stack.imgur.com/OOAtc.png
[3]: https://i.stack.imgur.com/PVcfT.png

On your 4.1 you seem to forget to assign your mock data into your variable
....
import { CROP } from '../shared/cropdata';
#Injectable({
providedIn: 'root'
})
export class CropService {
constructor() { }
CropData: Crop[] = CROP; // Assign the value
getCrop(name: string): Crop {
return this.CropData.filter((crop) => (crop.name === name))[0];
}
}
On your 4.2, you forgot to assign your mock data as well in your BehaviorSubject if you end up using this method. BehaviorSubjects are known to emit initial data
...
import { CROP } from '../shared/cropdata';
export class CropService {
private selectedCrop = new BehaviorSubject<Crop[]>(CROP); // Pass CROP mock data
setCrop(crop: Crop[]) {
this.selectedCrop.next(crop);
}
getCrop() {
this.selectedCrop.asObservable().pipe(skipWhile(val=> val === null));
}
}
Have created a Stackblitz Demo for your reference. You can check the console for the response

reloading page makes variable undefined in Angular

i have a deckbuilder, a decklist component that shows the list of decks, and when i click on a deck the proper deck-details component is loaded using the deck's id with routing. This is the deck-details part where i use route.
ngOnInit(){
this.decks = this.deckService.getDecks(); // this just returns the array of decks
this.id = this.route.snapshot.params["id"];
this.paramsSubscription = this.route.params.subscribe((params: Params) => {
this.id = params["id"];
console.log(this.id);
this.deck = this.decks.find((deck) => deck.id === this.id);
console.log("deck-detail deck", this.deck);
}
and this is the app-routing.module
const appRoutes: Routes = [
{ path: '', component: CardListComponent },
{ path: 'decks', component: DeckListComponent, children: [
{ path: ':id/:deckName', component: DeckDetailsComponent }
] },
{ path: 'createDeck', component: CreateDeckComponent },
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
so the url become something like this when i click on a deck: localhost:4200/decks/id/deckName.
If page is reloaded when the url is like this, deck-detail component is not reloaded with the page, and i get this error
TypeError: Cannot read property 'deckName' of undefined
at DeckDetailsComponent_Template
What i'm doing wrong? there is a component lifecycle problem? how can i avoid decks to be undefined when i reload the page?

this is the whole deck-details component
import { Card } from "./../../card/card.model";
import { Deck } from "./../../deck/deck.model";
import { Component, OnInit, Input } from "#angular/core";
import { DeckService } from "src/app/deck/deck.service";
import { ActivatedRoute, Params, Router } from "#angular/router";
import { Subscription } from "rxjs";
import { DataStorageService } from "src/app/shared/data-storage.service";
import { CardService } from "src/app/card/card.service";
import { FormControl, FormGroup } from "#angular/forms";
#Component({
selector: "app-deck-details",
templateUrl: "./deck-details.component.html",
styleUrls: ["./deck-details.component.scss"],
})
export class DeckDetailsComponent implements OnInit {
//#Input() deck: Deck;
paramsSubscription: Subscription;
id: number;
decks: Deck[];
deck: Deck;
cards: Card[];
selectedClassCards: Card[];
classes = [
"Priest",
"Mage",
"Shaman",
"Rogue",
"Warrior",
"Warlock",
"Druid",
"Paladin",
];
addCardForm: FormGroup;
constructor(
private deckService: DeckService,
private cardService: CardService,
private route: ActivatedRoute,
private dataStorageService: DataStorageService
) {}
ngOnInit() {
this.addCardForm = new FormGroup({
deckCards: new FormControl(),
});
this.cards = this.cardService.getCards();
this.decks = this.deckService.getDecks();
this.id = this.route.snapshot.params["id"];
this.paramsSubscription = this.route.params.subscribe((params: Params) => {
this.id = params["id"];
this.deck = this.decks.find((deck) => deck.id === this.id);
console.log("deck-detail deck", this.deck);
this.selectedClassCards = this.cards.filter(
(card) => card.hero === this.deck.deckClass || card.hero === "Neutral"
);
});
}
onDeleteCard(i) {
this.deckService.deleteCard(this.deck, this.deck.deckCards[i]);
//this.deckService.cardsChanged.next(this.deck.deckCards.slice());
console.log(this.deck);
}
onAddCard() {
this.deckService.addCard(this.deck, this.addCardForm.value.deckCards);
console.log(this.deck);
}
onCardsEdit() {
this.dataStorageService.storeCards(
this.decks.indexOf(this.deck),
this.deck.deckCards
);
}
ngOnDestroy() {
this.paramsSubscription.unsubscribe();
}
}
and this is the DeckService
import { DataStorageService } from './../shared/data-storage.service';
import { Deck } from './deck.model';
import { Card } from '../card/card.model';
import {EventEmitter, Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Subject } from 'rxjs';
#Injectable()
export class DeckService {
deckSelected = new EventEmitter<Deck>();
decksChanged = new Subject<Deck[]>();
cardsChanged = new Subject<Card[]>();
decks: Deck[] = [];
remainingDecks: Deck[];
constructor(/* private http: HttpClient, */ /* private dataStorageService: DataStorageService */) {}
setDecks(decks: Deck[]) {
this.decks = decks;
this.decksChanged.next(this.decks.slice());
}
getDecks() {
if (this.decks) {
return this.decks.slice();
}
}
addCard(deck: Deck, card: Card){
deck.deckCards.push(card);
}
deleteCard(deck: Deck, card: Card){
deck.deckCards.splice( deck.deckCards.indexOf(card), 1);
}
addNewDeck(deck: Deck){
this.decks.push(deck);
this.decksChanged.next(this.decks.slice());
};
deleteDeck(id: number) {
this.remainingDecks = this.decks.filter(
deck => deck.id !== id
)
this.decks = this.remainingDecks;
this.decksChanged.next(this.decks.slice());
}
}
and this is where i store and fetch decks with fire base and httpClient
import { DeckService } from "./../deck/deck.service";
import { CardService } from "./../card/card.service";
import { Deck } from "./../deck/deck.model";
import { Card } from "./../card/card.model";
import { Injectable } from "#angular/core";
import { HttpClient } from "#angular/common/http";
import { map, tap } from "rxjs/operators";
#Injectable({ providedIn: "root" })
export class DataStorageService {
constructor(private http: HttpClient, private deckService: DeckService) {}
storeDecks() {
const decks = this.deckService.getDecks();
this.http
.put("https://ang-cards.firebaseio.com/decks.json", decks)
.subscribe((response) => {
console.log(response);
console.log("stored");
});
}
fetchDecks() {
return this.http
.get<Deck[]>("https://ang-cards.firebaseio.com/decks.json")
.subscribe((decks) => {
decks
? this.deckService.setDecks(decks)
: this.deckService.setDecks([]);
console.log("fetching", decks);
});
}
storeCards(i: number, cards: Card[]){
this.http
.put("https://ang-cards.firebaseio.com/decks/" + i + "/deckCards.json", cards)
.subscribe((response) => {
console.log(response);
console.log("cards stored");
});
}
}

for info this is the deck-detail component html template
<div class="container">
<div class="row">
<div class="deck-details " style="border:solid black">
<!-- <img
[src]="'../../assets/img/' + deck.deckClass + '.png'"
alt="{{ deck.deckName }}"
class="img-responsive"
style="height: 200px;"
/> -->
<h1 contenteditable="true">{{ deck.deckName }} : {{ deck.deckClass }}</h1>
<div *ngFor="let card of deck.deckCards; let i = index" >
<span
[ngClass]="{
common: card.rarity == 'common',
rare: card.rarity == 'rare',
epic: card.rarity == 'epic',
legendary: card.rarity == 'legendary'
}"
>
{{ card.name }}
</span>
<h4 class="inlineh4">: {{ card.manaCost }} mana</h4>
<button class="btn btn-danger" (click) = "onDeleteCard(i)" >delete</button>
<!-- <img [src]="card.imagePath" alt="" style="height: 20px;" /> -->
</div>
<hr>
<label for="deckCards">Add a Card</label>
<form [formGroup]="addCardForm">
<select formControlName="deckCards" id="deckCards" name="deckCards">
<option *ngFor="let card of selectedClassCards" [ngValue]="card">
{{ card.name }}
</option>
</select>
<button (click)="onAddCard()" type="button" class="btn btn-primary">
Add Card
</button>
</form>
<hr>
<button class="btn btn-primary"(click) = "onCardsEdit()" >Save changes</button>
</div>
</div>
</div>

#Input decorator returning undefined in child class

I have two Components StudentsComponent and UnderGradsComponent. In the students component, I created a method to get me the names of students who are "undergrads" in a list. Then im sending this list ot the undergrads component. However, I am always getting that list as undefined inside the undergrads component.
Here is the code for my StudentsComponent
import { Component, OnInit } from "#angular/core";
#Component({
selector: "app-students",
templateUrl: "./students.component.html",
styleUrls: ["./students.component.css"]
})
export class StudentsComponent implements OnInit {
students = [
{ name: "Marwa", level: "undergrad" },
{ name: "Heba", level: "undergrad" },
{ name: "Amal", level: "postgrad" }
];
public undergradsList = this.undergrads();
constructor() {}
ngOnInit() {
this.undergrads();
console.log(this.undergrads);
}
undergrads() {
var Arrayres = new Array();
for (var i = 0; i < this.students.length; i++) {
if (this.students[i].level === "undergrad") {
Arrayres.push(this.students[i].name);
}
}
console.log(Arrayres);
return Arrayres;
}
}
Here is the html for the StudentsComponent
<app-under-grads *ngIf="undergradsList" [studentList]="undergradsList">
</app-under-grads>
Here is the code for the UndergradsComponent
import { Component, OnInit, Input } from "#angular/core";
#Component({
selector: "app-under-grads",
templateUrl: "./under-grads.component.html",
styleUrls: ["./under-grads.component.css"]
})
export class UnderGradsComponent implements OnInit {
#Input() public studentList;
constructor() {}
ngOnInit() {
console.log(this.studentList);
}
}
Finally here is the code for my HTML UnderGradsCompoenent
<h2>UnderGrads</h2>
<div>
<ul>
<li *ngFor="let x of studentList">{{ x }}</li>
</ul>
</div>

getData from multiple filters does not return anything

I can't get my getData function on app.component.ts to return the query with all the arguments for the API Request. I don't get any errors and I also can't console.log inside the function because it doesn't work. It skips everything I write inside getData. Any ideas?
app.component.ts
#Component({
/**
* Tag to show component in html
*/
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MedicineService]
})
export class AppComponent implements OnInit, AfterViewInit {
#ViewChildren(FiltersComponent) filters: QueryList<FiltersComponent>;
title = 'Base Remédios';
_medicines: Medicine[];
resourceType: Filter[] = [
{
id: 'all',
title: 'All',
active: true,
},
{
id: 'texto1',
title: 'Texto1',
},
{
id: 'texto2',
title: 'Texto2',
},
{
id: 'texto3',
title: 'Texto3',
},
];
levels: Filter[] = [
{
id: 'grupo1',
title: 'Grupo1',
active: true,
},
{
id: 'grupo2',
title: 'Grupo2',
},
{
id: 'grupo3',
title: 'Grupo3',
},
];
private resources: Observable<any>;
constructor(private _medicineService: MedicineService) {
}
/**
* Function to get array itens of endpoints
*/
getMedicines(): void {
this._medicineService.getMedicines()
.subscribe(
resultArray => this._medicines = resultArray,
error => console.log(error));
}
ngOnInit(): void {
this.getMedicines();
}
ngAfterViewInit() {
const filters = this.filters.map(f => f.changeFilter);
console.log('oi');
this.resources = combineLatest(...filters).pipe(
map((filters: ActiveFilter[]) =>
filters.map(filter => `${filter.group}=${filter.id}`).join('&')),
switchMap(this.getData));
}
getData(query) {
return timer(1).mapTo('https://api.com?' + query);
}
}
filter.component.ts
export interface ActiveFilter {
id: number | string;
group: string;
}
export interface Filter {
id: string | string;
title: string;
active?: boolean;
}
#Component({
selector: 'app-filters',
templateUrl: './filters.component.html',
styleUrls: ['./filters.component.css']
})
export class FiltersComponent implements OnInit, OnDestroy {
#Input() group: string;
#Input() filters: Filter[] = [];
changeFilter;
ngOnInit(): void {
const initialFilter = this.filters.find(f => f.active);
this.changeFilter = new BehaviorSubject<ActiveFilter>({
group: this.group,
id: initialFilter.id
});
}
ngOnDestroy() {
this.changeFilter.unsubscribe();
}
select(filter: Filter) {
console.log('click funciona');
this.filters.forEach(filter => filter.active = false);
filter.active = true;
this.changeFilter.next({
group: this.group,
id: filter.id
});
}
}
filters.component.html
<ul>
<li *ngFor="let filter of filters" (click)="select(filter)" [ngClass]="{ active: filter.active }">
{{filter.title}}
</li>
</ul>
app.component.html
<section>
<app-filters [filters]="resourceType" group="type"></app-filters>
<app-filters [filters]="levels" group="level"></app-filters>
</section>

There is issue with the parameter you are passing to switchMap function of rxjs.
Modified code -
ngAfterViewInit() {
const filters = this.filters.map(f => f.changeFilter);
console.log('oi');
this.resources = combineLatest(...filters).pipe(
map((filters: ActiveFilter[]) =>
filters.map(filter => `${filter.group}=${filter.id}`).join('&')),
switchMap(()=>this.getData())); // <------ change here
}
Refer this - https://www.learnrxjs.io/operators/transformation/switchmap.html

Angular 6 Bootstrap 4 have to click twice on menu tab

I have to click on the following menu "Text View" tab (mat-tab-link) twice to get the router-outlet to become active and underline the tab. I know this because of the documents.component.html content for the radio buttons, in it does not become active, unless I click twice on the Text View tab. Then the "Option 4" button shows active, and the tab underlines.
documents-pane.component.html
<nav mat-tab-nav-bar aria-label="documentsTabs">
<a class="navbar-brand" [routerLink]="['/customApp']">CustomApp</a>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive"
skipLocationChange>
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
documents-pane.component.ts
import { Component, OnInit } from '#angular/core';
import { CustomAppDocumentsComponent } from './documents/documents.component';
import { CustomAppGridComponent } from './grid/grid.component';
import { CustomAppSearchComponent } from './customApp-search/customApp-search.component';
#Component({
selector: 'app-documents-pane',
templateUrl: './documents-pane.component.html',
styleUrls: ['./documents-pane.component.scss'],
})
export class CustomAppDocumentsPaneComponent implements OnInit {
constructor() { }
ngOnInit() {
}
navLinks = [
{path: 'documents', label: 'Text View'},
{path: 'grid', label: 'Grid View'},
{path: 'customApp-search', label: 'Search Terms'},
]
}
app-routing.module.ts
...
import { CustomAppDetailComponent } from './customApp/customApp-detail.component';
import { CustomAppBaseComponent } from './customApp/documents-pane/customApp-base/customApp-base.component';
import { CustomAppDocumentsComponent } from './customApp/documents-pane/documents/documents.component';
import { CustomAppGridComponent } from './customApp/documents-pane/grid/grid.component'
import { CustomAppSearchComponent } from './customApp/documents-pane/customApp-search/customApp-search.component'
...
...
const routes: Routes = [
{
path: 'customApp',
component: CustomAppDetailComponent,
children: [
{
path: '',
component: CustomAppBaseComponent,
},
{
path: 'customApp-base',
component: CustomAppBaseComponent,
},
{
path: 'documents',
component: CustomAppDocumentsComponent,
},
{
path: 'grid',
component: CustomAppGridComponent,
},
{
path: 'customApp-search',
component: CustomAppSearchComponent,
},
]
}
...
documents.component.html
<div style='float: left; width: 75%;'>
<mat-radio-group formControlName="testEntryOption">
<mat-radio-button class="material-radio" value="opt1">Option 1</mat-radio-button>
<mat-radio-button class="material-radio" value="opt2">Option 2</mat-radio-button>
<mat-radio-button class="material-radio" value="opt3">Option 3</mat-radio-button>
<mat-radio-button class="material-radio" value="opt4" [checked]="true">Option 4</mat-radio-button>
</mat-radio-group>
</div>
<div style='float: left; width: 25%;'>
<mat-button-toggle-group name="buttonSelection">
<mat-button-toggle value="button1">Button 1</mat-button-toggle>
<mat-button-toggle value="button2">Button 2</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div>
documents works!
</div>
I have tried several other code implementations, even a bootstrap menu bar, with no luck. Any input is greatly appreciated. What are my options?