Create a new array on the basis of id in angular/typescript

Question

Hi I am getting below responses from 2 api calls. First I'm calling 1st api and getting below respose

first response I'm getting from 1st api call

dataName =   [
{
"id": "1",
"name": "stage1",
},
{
"id": "2",
"name": "stage2",
},
{
"id": "3",
"name": "stage3",
}
]

In dropdown i'm display name values

 <mat-select (selectionChange)="onOptionsSelected($event)"required placeholder="Choose Data Name">
              <mat-option *ngFor="let obj of dataName" >
                {{obj.name}}
              </mat-option>
            </mat-select>

On selection of name from first dropdown I need to call a different api which will give me below response

cluName = [
  {   
"cname": "cname1",
"id": "3",
 },
 {   
"cname": "cname3",
"id": "2",
 },
 {   
"cname": "cname1",
"id": "2",
}
]

On dropdown selection when selecting name I need to send the ID instead of name to match the cname associated with the ID and display in another dropdown.

Suppose if I select stage2 then I need to send ID :2 and match in second response its associated cname(cname3,cname1) and display those cname in second dropdwon. How to achieve this please help.

On selectionChange I tried following method

onOptionsSelected(event) {
 this.newArrayCluster = [];
 this.cluName.forEach(element => {
 this.newArrayCluster.push(element.find(item => item['id'] === 
event.value))});
console.log(this.newArrayCluster); 
 }

But I'm getting error "element.find is not a function".

What have you tried so far? Also in the response from first call the property is `name` whereas in the HTML template it's `datacenter-name`. Which is the right name? Also if the object property has an hyphen `-`, it's better to access it using bracket notation `obj['datacenter-name']` rather than dot notation: https://stackoverflow.com/a/7122629/6513921 — ruth, Jul 12 '21 at 07:51
I can't explain the code right now, but try to gather info from this [Stackblitz](https://stackblitz.com/edit/angular-mat-select-example-rnwg71?file=src/app/app.component.ts) implementation. Hit up here if you have any question. — ruth, Jul 12 '21 at 08:56

score 2 · Answer 1 · answered Jul 12 '21 at 07:53

2

you must do like this in your Html file

 <mat-select  (selectionChange)="onOptionsSelected($event)"required placeholder="Choose Data Name">
              <mat-option [value]="obj.id " *ngFor="let obj of dataName" >
                {{obj.datacenter-name}}
              </mat-option>
            </mat-select>

answered Jul 12 '21 at 07:53

Sepandar Derakhshandeh

36
5

But how I will iterate the second array and get the matching value of cname with the id? – user1881845 Jul 12 '21 at 07:57
You can also use `let dataArr = dataName.filter(data => data.id == value )` – Sepandar Derakhshandeh Jul 12 '21 at 09:13

score 0 · Answer 2 · answered Jul 12 '21 at 10:38

0

*please follow given below link it would help ful for you first you should make relation between two array *

https://stackblitz.com/edit/angular-qvqqgc

answered Jul 12 '21 at 10:38

Naveed Akram

33
1
6

Create a new array on the basis of id in angular/typescript

2 Answers2