I want to display something like this in a single page. The complication is that this data comes from 4 different sources.
City One
Property One
Property Two
Property Three A
Property Three B
Property Three C
City Two
Property One
Property Two
Property Three A
Property Three B
Property Three C
City Three
Property One
Property Two
Property Three A
Property Three B
Property Three C
City - comes from JSON A, which returns a simple array of n objects containing name and id.
Property One comes from JSON B (using City.id as a parameter in the URL), returning one set of objects specific to City.id.
Property Two comes from JSON C (using City.id as a parameter in the URL), returning one set of objects specific to City.id.
Property Three A/B/C comes from JSON D (using an key field returned in Property Two), returning one set of objects specific to a particular property key specified in Property Two.
Is this even doable? I'm aware that this requires 3n+1 semi-synchronous JSON calls. At this point I don't know if I should be looking for help on controllers or directives or some kind of crazy routing or what.
I'm a total noob at Angular (I come from an ASP.NET MVC background) and I can't wrap my ahead around this. I've been trying to follow John Papa's Style Guide, so there isn't a $scope to be found anywhere in my code, which is severely limiting my understanding of some pages I've looked up to solve this.