Angular map flower (celery django) return to list of tasks-CodePudding

I want to map the return of the flower libary (/api/tasks) to a list of objects. Currently it returns multiple objects, but without the "list wrapper", so it's not possible to iterate that. API: https://flower.readthedocs.io/en/latest/api.html#get--api-tasks

Return is for example:

HTTP/1.1 200 OK
Content-Length: 1109
Content-Type: application/json; charset=UTF-8
Etag: "b2478118015c8b825f7b88ce6b660e5449746c37"
Server: TornadoServer/3.1.1

{
    "e42ceb2d-8730-47b5-8b4d-8e0d2a1ef7c9": {
        "args": "[3, 4]",
        "client": null,
        "clock": 1079,
        "eta": null,
        "exception": null,
        "exchange": null,
        "expires": null,
        "failed": null,
        "kwargs": "{}",
        "name": "tasks.add",
        "received": 1398505411.107885,
        "result": "'7'",
        "retried": null,
        "retries": 0,
        "revoked": null,
        "routing_key": null,
        "runtime": 0.01610181899741292,
        "sent": null,
        "started": 1398505411.108985,
        "state": "SUCCESS",
        "succeeded": 1398505411.124802,
        "timestamp": 1398505411.124802,
        "traceback": null,
        "uuid": "e42ceb2d-8730-47b5-8b4d-8e0d2a1ef7c9",
        "worker": "celery@worker1"
    },
    "f67ea225-ae9e-42a8-90b0-5de0b24507e0": {
        "args": "[1, 2]",
        "client": null,
        "clock": 1042,
        "eta": null,
        "exception": null,
        "exchange": null,
        "expires": null,
        "failed": null,
        "kwargs": "{}",
        "name": "tasks.add",
        "received": 1398505395.327208,
        "result": "'3'",
        "retried": null,
        "retries": 0,
        "revoked": null,
        "routing_key": null,
        "runtime": 0.012884548006695695,
        "sent": null,
        "started": 1398505395.3289,
        "state": "SUCCESS",
        "succeeded": 1398505395.341089,
        "timestamp": 1398505395.341089,
        "traceback": null,
        "uuid": "f67ea225-ae9e-42a8-90b0-5de0b24507e0",
        "worker": "celery@worker1"
    }
}

Any ideas how to do that? I've tried the following thing:

export interface Tasks {
  tasks: TaskWrapper[]
}

export interface TaskWrapper {
  [uuid: string]: Task
}

export interface Task {
  uuid: string,
  state: string,
  received: string,
}

Added example of Dragan leads to the following problem:

loadAllTasksFromFlower(): Observable<Task[]> { 
return this.http.get<Task[]>("localhost:5566/api/tasks")
.pipe(map(response => Object.entries(response)
.map(entry => ({ uuid: entry[0], state: entry[1].state, received: entry[1].received }))
}

TS2322: Type 'Observable<{ uuid: string; state: TaskState; received: any; }[]>' is not assignable to type 'Observable<Task[]>'. Type '{ uuid: string; state: TaskState; received: any; }[]' is not assignable to type 'Task[]'. Type '{ uuid: string; state: TaskState; received: any; }' is missing the following properties from type 'Task': type, source, invoke, callback, and 3 more.

CodePudding user response：

The way you organized the interfaces is good, you can put the items in the array in this way:

const tasks: Task[] = Object.entries(data).map(entry => ({
    uuid: entry[0],
    state: entry[1].state,
    received: entry[1].received
}));