requêtes HTTP multiples générées par requête HTTP angulaire 2

Question

API backend de:
url: http://www.sample.com/getAllPersons

[ 
    { 
     "name": "ABC", 
     "occupation": "Student", 
     "address_url": "http://www.sample.com/address/person=hgjgjgyyfhg" 

    }, 
    { 
     "name": "ABC1", 
     "occupation": "Carpenter", 
     "address_url": "http://www.sample.com/address/person=fsdafdsa" 

    }, 
    { 
     "name": "ABC2", 
     "occupation": "Developer" 

    }, 
    { 
     "name": "ABC3", 
     "occupation": "Tester", 
     "address_url": "http://www.sample.com/address/person=sgdfsgd" 

    } 
] 

url: http://www.sample.com/address/person=hash_value

{ 
    "address": "XYZ", 
    "city": "Phoenix", 
    "state": "Arizona", 
    "pin code": "3243242" 
} 

Besoin tableau d'objets: -

{ 
    "name": "ABC", 
    "occupation": "Student", 
    "address": "XYZ", 
    "city": "Phoenix", 
    "state": "Arizona", 
    "pin code": "3243242" 

} 

Je dois montrer dans une vue le nom, occ l'adresse et l'adresse complète de chaque personne avec les deux adresses ci-dessus. Remarque: l'adresse de chaque personne peut ne pas être disponible.

S'il vous plaît suggérer la meilleure méthode pour le faire de manière asynchrone à l'aide du service HTTP et promesses/Observables dans angulaire 2.

Ma solution:
Créer demande http promesse de getAllPersons.
En alors fonction:

• Enregistrer la réponse dans une variable de classe de composants.
• Créer tableau de promesses http de la address_url de chaque objet (si elle est présente).
• Retour Promise.all ([Tableau de promesses d'adresse URL])

Dans alors la fonction:

• réponses Itérer un par un et les ajouter à la classe de composant variable contenant address_url.

Y at-il une meilleure façon? Suggérer aussi si c'était une hiérarchie à trois voies.

Answer 1

Utilisez flatMap et forkJoin:

var o = http.get('http://www.sample.com/getAllPersons') 
    .flatMap(t=> Observable.forkJoin( 
      t.json().filter(x=>x.address_url != null) 
      .map(y=> http.get(y.address_url).map(t=>json())) 
    )); 

Abonnez-vous comme ceci:

o.subscribe(arr=> { 
    //arr[0] --> address_url[0] 
    //arr[1] --> address_url[1] 
    ... 
});