Angular 4 handle with complex data

Question

I have three classes A, B and C like this:

class A{
  id: number;
  name: string;
  //... more
  items: B[];
}

class B{
    id: number;
    name: string;
    //... more
    otherItems: C[];
}

class C{
    id: number;
    name: string;
}

A, B and C have their own service to get the data by id from http request but the data comes like

class A{
    id: number;
    name: string;
    ...
    items: number[]; //ids of B items
}

class B{
    id: number;
    name: string;
    ...
    otherItems: number[]; //ids of C items
}

class C{
    id: number;
    name: string;
    ...
}

Some behavior of A depends on C items so I have three components (AComponent, BComponent and CComponent) with 'id' input and I'm using @ViewChildren on parent component, combined with some get/set functions to get the info needed, but I don't think that I'm going the best way

I thought about to do a resolver to get full A data before start, but it's a mess with so many promises.

Which way do you think is a better solution? Any other idea?

Using a flux implementation would probably help you sort through your data dependencies more easily. — David L, Mar 05 '18 at 18:51

score 0 · Answer 1 · answered Mar 06 '18 at 01:39

Some behavior of A depends on C items

Maybe you should work on this. You won't be able to start from C, since you don't know the ids of C to start with. Therefore A needs to be dependent on itself, at least for the initial loading of A, it needs to be dependent on itself.

The common section of A (depending on itself) needs to be isolated out, just to finish the loading of A. And then once C are loaded, you can come back to adjust A again.

It's a circle, so I guess the key is to break the circle to form a line.

Angular 4 handle with complex data

1 Answers1