title: concat two json objects from different api by id in axios get and store
body: <p>I have a question about how to add the second nested api query in axios. The second api query to get the json object based on the id from the first api array json. And then concat to global array in function Retrieve()?</p>
  
  <p><strong>first api url:</strong></p>
  
  <pre><code>'/api/sets'
  </code></pre>
  
  <p><strong>second api children:</strong> </p>
  
  <pre><code>'/api/sets/' + todo.id + '/tasks'
  </code></pre>
  
  <p><strong>responce global json from first api url:</strong></p>
  
  <pre><code>[
      {
          "id": 121,
          "name": "list1",
          "description": "description1"
      },
      {
          "id": 9,
          "name": "list2",
          "description": "description2"
      }
  ]
  </code></pre>
  
  <p><strong>responce second json children from api by id first api:</strong></p>
  
  <pre><code>[
      {
          "id": 1,
          "name": "task1",
          "description": "description task1"
      },
      {
          "id": 2,
          "name": "task2",
          "description": "description task2"
      }
  ]
  </code></pre>
  
  <p><strong>and finally expected combined stored array json</strong> </p>
  
  <pre><code>[
       {
          "id": 121,
          "name": "list1",
          "description": "description1",
          "task": [{
                  "id": 1,
                  "name": "task1",
                  "description": "description task1"
              },
              {
                  "id": 2,
                  "name": "task2",
                  "description": "description task2"
              }
          ]
      },
      {
          "id": 9,
          "name": "list2",
          "description": "description2",
          "task": [{
                  "id": 10,
                  "name": "task1",
                  "description": "description task1"
              },
              {
                  "id": 11,
                  "name": "task2",
                  "description": "description task2"
              }
          ]
      }
  ]
  </code></pre>
  
  <p>code js:
  index.js:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import { Provider } from 'mobx-react';
  import TodoStore from './store';
  
  const Root = (
      &lt;Provider TodoStore={TodoStore}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;
  );
  
  ReactDOM.render(Root, document.getElementById('root'));
  </code></pre>
  
  <p>store.js</p>
  
  <pre><code>import React from 'react';
  import { observable, action, configure, runInAction } from 'mobx';
  import axios from 'axios';
  configure({ enforceActions: 'observed' });
  
  class TodoStore {
      @observable todos = [];
  
      @action Retrieve = () =&gt; {
          axios
              .get('/api/sets')
              .then(response =&gt; {
                  let tempTodos = response.data;
                  runInAction(() =&gt; {
                      this.todos = tempTodos;
                  });
              })
              .catch(error =&gt; {
                  console.log(error);
              });
      };
  }
  
  const store = new TodoStore();
  export default store;
  </code></pre>