Data from 2 arrays - arrays

Question

So i have two arrays:
1:
"movies":
{
"id": "123bb",
"category": "3345",
"content": "Sinister"
}
Second:
"categories":
{
"id": "3345",
"code": "Movie",
"name": "Horror"
},
I also have random movie:
TS:
loadData() {
this.PagesService.loadData().subscribe(response => {
console.log(response)
this.movies = response
this.movies[Math.floor(Math.random() * this.movies.length)];
this.randomValue = this.movies[Math.floor(Math.random() * this.movies.length)];
return this.randomValue
})
console.log(this.randomValue)
};
HTML:
<p>{{ this.randomValue.content }}</p>
So if I have something like this:
<p>{{ this.randomValue.category }}</p>
There is "3345" as category but I would like to have "name" from this second array but I am not sure how to do that

Answer 1

My recommendation:
store the data as observable
map the data in observable pipe (maybe use combineLatest to combine movies and categories data)
use the async pipe in template
use an own structural directive to pick the datas random element
Here is how it could look like...
The directive
import { Directive, Input, TemplateRef, ViewContainerRef } from '#angular/core';
interface RandomContext<T> {
appRandom: T[];
$implicit?: T;
}
#Directive({
standalone: true,
selector: '[appRandom]',
})
export class RandomDirective<T> {
private context: RandomContext<T> = {
appRandom: [],
$implicit: undefined,
};
#Input()
set appRandom(elements: T[]) {
this.context.appRandom = elements;
this.pickNewElement();
}
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
) {
this.viewContainer.createEmbeddedView(this.templateRef, this.context);
}
private pickNewElement(): void {
this.context.$implicit =
this.context.appRandom[
Math.floor(Math.random() * this.context.appRandom.length)
];
}
}
And your template:
<p *appRandom="movies$ | async; let randomMovie">
{{ randomMovie.category }}
</p>
And your component:
movies$: Observable<ExtendedMovie[]>;
ngOnInit() {
this.movies$ = combineLatest([
this.PagesService.loadData(),
this.CategoriesService.loadCategories(),
]).pipe(
map(([movies, categories]) => {
return /*map movies array to extend it with your required data from categories array*/;
}),
);
}