How to get data from different arrays using angular 2+

Question

I have list of group items which i am getting dynamically below is sample data

groupItems = {
    "AllResult": [
        {
            "GrpId": 1,
            "GroupName": "DESKTOP",
        },
        {
            "GrpId": 2,
            "GroupName": "LAPTOPS",
        },
        {
            "GrpId": 3,
            "GroupName": "MOBILES",
        }
    ]
}

and i am displaying these in the form of buttons so when ever i click on this button the i need display the result of that concerned group suppose if i click the Group name Laptops the items of laptops has to be displayed by using the groupid below is the result of the Items JSON

itemsDetails = {
    "AllList": [
        {
            "ItemId":1
            "GrpId": 1,
            "ItemName": "DELL",
        },
        {
            "ItemId":1
            "GrpId": 1,
            "ItemName": "ACER",
        },
        {
            "ItemId":1
            "GrpId": 1,
            "ItemName": "LENOVO",
        },
        {
            "ItemId":1
            "GrpId": 2,
            "ItemName": "HP",
        },
        {
            "ItemId":1
            "GrpId": 2,
            "ItemName": "ASUS",
        },
        {
            "ItemId":1
            "GrpId": 3,
            "ItemName": "Motorolla",
        }        
    ]
}

.html

<div *ngFor="let data of groupItems" (click)=items(data.Grpid) >
 <p>{{data.GroupName}}</p>
</div>

.ts code

items(Grpid){


}

Now my question is how can i get data/list of items when ever i click on the particular group suppose if i click on the DESKTOPS then all the items related to desktop has to be displayed

Trying the solution:

Anshuman Jaiswal · Accepted Answer · 2018-06-09 19:01:06Z

2

There is no need to add extra key for array, you can directly have array of objects for groupItems & itemsDetails as:

groupItems = [
    {
        "GrpId": 1,
        "GroupName": "DESKTOP",
    }
    ...
]

itemsDetails = [
    {
        "ItemId":1
        "GrpId": 1,
        "ItemName": "DELL",
    }
    ...       
]

HTML

<div *ngFor="let data of groupItems" (click)=getItems(data.Grpid) >
    <p>{{data.GroupName}}</p>
</div>

TS

getItems(Grpid){
    let filteredData = this.itemsDetails.filter(item => item.GrpId == Grpid);
    console.log(filteredData);
}

edited Jun 9, 2018 at 19:01

answered Jun 9, 2018 at 18:25

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

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

4 Comments

Devpop Over a year ago

Ok but by using solutions i tried when ever i am calling groupItems suppose if i call desktop items all the items which are listed in desktop has to return but with ur solutions whats happening is it is displaying the all the items of the other groups also irrespective of the group i clicked

Devpop Over a year ago

please check the solution i got after applying ur solution

Anshuman Jaiswal Over a year ago

@Devpop My bad it would be item.GrpId == Grpid rather than item.GrpId = Grpid missed = so instead of comparison it was assignment. Updated the answer check now.

Devpop Over a year ago

yeah i found out the same and got the solutions and how can i make this items data as asynchronous like suppose if i have list of 500 names

Collectives™ on Stack Overflow

How to get data from different arrays using angular 2+

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related