Angular dynamic array showing all results not just data under id

Question

I am still trying to learn what seems to me like advanced Angular 5. The below code does enter the "id" number from the array into the url as expected, but when I go to model/1 it shows my all the objects from the array. I need to only see the object under id 1 and same for each object in the array. I have found so much conflicting information online, from mapping to queries that I'm not even sure where to being and everything I've tried has led to no better results. I have included all the code I'm working with.

I have an array of objects in my json file-

[
{
    "id": 1,
    "label": "Metal Man",
    "sample": "/assets/img/metalman1.png",
    "fab": "https://sketchfab.com/models/1b3cb7f8a77145bc8616075e9036b025/embed",
    "img1": "/assets/img/metalman1.png",
    "img2": "/assets/img/metalman2.png",
    "img3": "/assets/img/metalman3.png"
  },
  {
    "id": 2,
    "label": "Magrot",
    "sample": "/assets/img/magrot1.png",
    "fab": "https://sketchfab.com/models/e20c8ade2f16452ca7f440aa84fc8e33/embed",
    "img1": "/assets/img/magrot1.png",
    "img2": "/assets/img/magrot2.png",
    "img3": "/assets/img/magrot3.png"
  },
  {
    "id": 3,
    "label": "Baseball and Bat",
    "sample": "/assets/img/ball1.png",
    "fab": "https://sketchfab.com/models/781c60d3449b46f996a081ae36c20cce/embed",
    "img1": "/assets/img/ball1.png",
    "img2": "/assets/img/ball2.png",
    "img3": "/assets/img/ball3.png"
  }
]

My template for each of the above objects-

<div class="columnFlex mainBlock" *ngFor="let model of modelwork">
<div class="modelImagery">
  <h1>{{ model.label }}</h1>
  <iframe [src]='sanitizer.bypassSecurityTrustResourceUrl(model.fab)'
    frameborder="1" allowvr allowfullscreen mozallowfullscreen="true"
    webkitallowfullscreen="true" onmousewheel=""></iframe>
    <img [src]="model.img1" />
    <img [src]="model.img2" />
    <img [src]="model.img3" />
  </div></div>

And my Activatedroute set up-

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';

@Component({
  selector: 'app-model',
  templateUrl: './model.component.html',
  styleUrls: ['./model.component.css']
})
export class ModelComponent implements OnInit {

  modelwork: any;

  constructor( private route: ActivatedRoute, private router: Router, private http: HttpClient, public sanitizer: DomSanitizer ) {
    this.sanitizer = sanitizer;

    this.route.params.subscribe(params => {this.modelwork = params['id'];});
 }

  ngOnInit(): void {
       this.http.get<any>('./assets/models.json').subscribe(
         data => {
           this.modelwork = data;
         })
  }

}

Any clarification on what I'm needing to do would be so appreciated! I'm trying to learn Angular in days and it is more complicated than I had expected. Thank you for taking the time to look at this!

Answer 1

I don't see anything advanced here. You simple have two asynchronous operations that both set the variable 'modelwork'. One of the operations sets modelwork to an integer and the other sets it to a json array. depending on which operation resolves first.

Edit

Looking at your comment, i see what you want to do. Here's an example:

chosenIndex: any;
modelwork: any;

constructor( private route: ActivatedRoute, private router: Router, private http: HttpClient, public sanitizer: DomSanitizer ) {
  this.sanitizer = sanitizer;
}

ngOnInit(): void {
  this.route.params.subscribe(params => {
    this.chosenIndex = params['id'];

    this.http.get<any>('./assets/models.json').subscribe(data => {
      this.modelwork = data.filter(d => d['id'] == this.chosenIndex);
    })
  });
}

Modelwork will now contain an array of 1 object. The one object you want. You can alter this example to get whatever output you want.