How to list hasMany object and display related items

hello i am developing an ember app for the first time with the django serving api . i have an api end point for outfit what i want to do is to list all outfits in a page and When user clicks a particular outfit i want to list all the productvariants associated with the outfit_id ,and all the products belonging to each producvariant should be listed below so when a user clicks one productvariant link it should scroll to products belonging to that variant . For better understanding this is what i want to achieve http://ift.tt/29FwbRi please help as i am nearing a deadline for this project

OUTFIT API
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 3,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 4,
            "title": "outfit 2",
            "productvariant": [
                1,
                2,
                3
            ]
        },
        {
            "id": 5,
            "title": "outfit13",
            "productvariant": [
                2,
                3,
                4
            ]
        },
        {
            "id": 6,
            "title": "outfit89",
            "productvariant": [
                2,
                3
            ]
        }
    ]
}

PRODUCTVARIANT API    
HTTP 200 OK
Allow: GET, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 4,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 1,
            "title": "tan brogues",
            "product": [
                169,
                170,
                171,
                       ],
            "outfits": [
                4
            ]