title: RxJS Execute Requests Based on Prior Data Responses (Involves Looping Through Array of Objects)
body: <p>I have an object of the following structure:</p>
  <pre><code>{
   parent1: [
       {childId: 1},
       {childId: 2}
      ],
   parent2: [
       {childId: 3},
       {childId: 4}
      ],
   parent3: [
       {childId: 5},
       {childId: 6}
   ]
  }
  </code></pre>
  <p>The following services:</p>
  <pre><code>addFamily(data: any): Observable&lt;Family&gt; {
       const body = JSON.stringify(data);
       return this.httpClient
            .post&lt;Family&gt;(this.apiUrl + '/family', body, this.httpOptions)
  }
  addParent(data: any): Observable&lt;Parent&gt; {
       const body = JSON.stringify(data);
       return this.httpClient
            .post&lt;Parent&gt;(this.apiUrl + '/parent', body, this.httpOptions)
  }
  addChild(data: any): Observable&lt;Child&gt; {
       const body = JSON.stringify(data);
       return this.httpClient
            .post&lt;Child&gt;(this.apiUrl + '/child', body, this.httpOptions)
  }
  </code></pre>
  <p>There are corresponding &quot;family&quot;, &quot;parent&quot;, and &quot;child&quot; tables in the database and I want to POST to each of these tables accordingly using RxJS higher order mapping operators to build a data response from prior calls. The idea is:</p>
  <ol>
  <li>call <code>addFamily()</code> and return a new<code>familyId</code></li>
  <li>call <code>addParent()</code> passing in <code>familyId</code> and returning a new <code>parentId</code></li>
  <li>call <code>addChild()</code> passing in <code>parentId</code> for each child created</li>
  </ol>
  <p>After performing the operations on the example object, there will be:</p>
  <ul>
  <li>6 children added (FK child_parent)</li>
  <li>3 parents added (FK parent_family)</li>
  <li>1 family added</li>
  </ul>
  <p>Currently the codebase is using multiple nested subscribes to perform the above tasks, which is why I looked into RxJS and stumbled upon the below code from a similar <a href="https://stackoverflow.com/questions/66588210/wait-for-nested-subscribe-in-angular-before-continuing-with-main-subscribe-rxjs">question</a>.</p>
  <pre><code>private getData(): Observable&lt;VmData&gt; {
  
       return this.service.getSomeData().pipe(
                   switchMap(session =&gt; this.service.getUserData(session.userId).pipe(
                        switchMap(user =&gt; this.service.getMetaData(user.id).pipe(
                             // by nesting, map has access to prior responses
                             map(userMeta =&gt; this.buildVmData(session, user, userMeta))             
                        ))
                   )),
                   tap(() =&gt; this.isLoading = false)
       );
  }
  </code></pre>
  <p>The above code would work if it was one family -&gt; one parent -&gt; one child, but how can I modify it to add 1 family, loop through each parent, and add each children under that parent? Any help is greatly appreciated. Thank you.</p>