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: stackoverflow.com/a/7122629/6513921 — Barremian
– Barremian, Commented Jul 12, 2021 at 7:51
I can't explain the code right now, but try to gather info from this Stackblitz implementation. Hit up here if you have any question. — Barremian
– Barremian, Commented Jul 12, 2021 at 8:56

Sepandar Derakhshandeh · Accepted Answer · 2021-07-12 07:53:22Z

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, 2021 at 7:53

Sepandar Derakhshandeh

465 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1881845 Over a year ago

But how I will iterate the second array and get the matching value of cname with the id?

Sepandar Derakhshandeh Over a year ago

You can also use let dataArr = dataName.filter(data => data.id == value )

Naveed Akram · Accepted Answer · 2021-07-12 10:38:37Z

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, 2021 at 10:38

Naveed Akram

1302 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related