title: Use Rxjs in Angular to update data in a Json coming from different Json sources
body: <p>I have 3 different services A,B,C. These services produce each a different JSON. JSON from service A has properties which values need to be replaced with values from JSON B and C.  </p>
  
  <p>I have solved this using plain JavaScript but I want to use Rxjs, because Rxjs is scalable. And I want to return an Observable instead of data.</p>
  
  <p>My three JSON's:</p>
  
  <pre><code>let A = {
      "conditions": [{
          "conditionId": "BASFD",
          "conditionDescr": "Substitute with component description",
          "pay": "P"
      }, {
          // &lt;&lt; more items &gt;&gt;
      }]
  };
  
  let B = {
      "components": [{
          "componentId": "BASFD",
          "description": "Assortimentsbonus"
      }, {
          "componentId": "BBY",
          "description": "Bonus bypass"
      }]
  };
  
  let C = {
      "text": [{
          "textcode": "PAYMENT",
          "values": [{
              "code": "P",
              "description": "Percentage"
          }, {
              "code": "A",
              "description": "Amount"
          }]
      }, {
          "textcode": "PERIOD",
          "values": [{
              "code": "J",
              "description": "Per year"
          }, {
              "code": "M",
              "description": "Per month"
          }]
      }]
  }
  </code></pre>
  
  <p>My JavaScript code to substitute the values <code>ConditionDescr</code> and <code>Pay</code> in JSON A:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.httpClient.get&lt;ConditieTypeObject&gt;(environment.url + 'bonus/' + id, {
      params: new HttpParams().append('year', year.toString()),
      observe: 'body',
      responseType: 'json'
  }).pipe(map(x =&gt; x.conditions)).subscribe((A) =&gt; {
  
      A.forEach((y) =&gt; {
          y.conditionDescr = B.components.filter(function (x2) {
              return x2.componentId == y.conditionId;
          })[0].description;
  
          y.pay = C.text.filter(function (x3) {
              return x3.textcode == 'PERIOD';
          })[0].values.filter(function (x4) {
              return x4.code == y.pay;
          })[0].description;
      });
  
      console.log(A);
  });
  </code></pre>
  
  <p>Then the result is this and thats OK:</p>
  
  <pre><code>{
      "conditions": [{
          "conditionId": "BASFD",
          "conditionDescr": "Assortimentsbonus",
          "pay": "Per year"
      }, {
          // &lt;&lt; more items &gt;&gt;
      }]
  }
  </code></pre>
  
  <p>But I want to solve this in Rxjs because I can use an observable which can be passed directly as an async to an HTML table. I don't want to subscribe first into the function like in my code right now.</p>
  
  <p>I tried it with <code>switchMap</code> and <code>concatMap</code> but that doesn't work. Anybody have an idea how to solve this in RxJS ?</p>