# fetch.all and Handlebars.js - Combining the results of two API requests in one list

**URL:** https://forum.kirupa.com/t/fetch-all-and-handlebars-js-combining-the-results-of-two-api-requests-in-one-list/638446
**Category:** Uncategorized
**Created:** [July 4, 2018, 7:31am UTC](https://forum.kirupa.com/t/fetch-all-and-handlebars-js-combining-the-results-of-two-api-requests-in-one-list/638446 "2018-07-04T07:31:54Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![kayut](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kayut](https://forum.kirupa.com/u/kayut)
#### Post date: [July 4, 2018, 7:31am UTC](https://forum.kirupa.com/t/fetch-all-and-handlebars-js-combining-the-results-of-two-api-requests-in-one-list/638446/1 "2018-07-04T07:31:54Z")

</div>

Hi,

In the following example I’m using fetch.all to combine two different API requests.

[fetch.all and Handlebars.js](https://codepen.io/itsthomas/pen/BVEdOo?editors=0010)

The unordered list, which is created by using Handlebars.js is showing all staffs from the second request.

Now my question:

How can I add the result of the first request to the same unordered list?

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [July 4, 2018, 1:39pm UTC](https://forum.kirupa.com/t/fetch-all-and-handlebars-js-combining-the-results-of-two-api-requests-in-one-list/638446/2 "2018-07-04T13:39:16Z")

</div>

There is no fetch.all, but looking at the code, it looks like you mean Promise.all.

Also, it seems the results of those requests are unrelated, so I’m not sure how you’d add them together. But, that’s what’s great about programming: you get to decide for yourself and code it the way you want. One is a list of people, and the other is information about a single show. What to do?

What Promise.all does is makes sure that you get a callback (then()) called when all of the promises you provide it (each fetch) are completed, so in that then(), you have all the data that was loaded available for use - to use however way you choose to combine that data.

---

<div class="post-metadata">

### Author: ![kayut](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@kayut](https://forum.kirupa.com/u/kayut)
#### Post date: [July 5, 2018, 10:59am UTC](https://forum.kirupa.com/t/fetch-all-and-handlebars-js-combining-the-results-of-two-api-requests-in-one-list/638446/3 "2018-07-05T10:59:22Z")

</div>

Yes, you are right. I meant **Promise.all** not fetch.all.  
Meanwhile I managed to achieve what I wanted as follow:

HTML

```auto
  <ul id="container" class="cf"></ul>

  <script id="ourTemplate" type="text/x-handlebars-template">

    <!-- Data coming from staff array -->
    {{#each staff}}
      <li class='list-container'>
        <div class='img-container'><img src="{{ this.image_url }}"></div>
        <div class='name-container'>{{ this.name }}</div>
      </li>
    {{/each}}

    <!-- Data coming from the results array -->
    {{#each results}}
    <li class='list-container results'>
      <div class='img-container'><img src="{{ this.picture.medium }}"></div>
      <div class='name-container'>{{ this.name.first }} {{ this.name.last }}</div>
    </li>
    {{/each}}

  </script>
```

JavaScript

```auto
const apiRequest1 = fetch('https://randomuser.me/api/?results=10').then(function(response){ 
  return response.json()
});

const apiRequest2 = fetch('https://api.jikan.moe/anime/1/characters_staff').then(function(response){
  return response.json()
});

let combinedData;

Promise.all([apiRequest1,apiRequest2]).then(function(data){
  firstAPI = data[0];
  console.log(firstAPI);

  secondAPI = data[1];
  console.log(secondAPI);

  combinedData = {...firstAPI, ...secondAPI};
  console.log(combinedData);

  createHtml(combinedData);
  // createHtml(combinedData.results);
  // return combinedData;
})
.catch(function(error) {
  console.log('Looks like there was a problem: \n', error);
});

// Function to generate the HTML
function createHtml(ourData) { // ourData is just a parameter and can be named anything
  let rawTemplate = document.querySelector("#ourTemplate").innerHTML;
  let compiledTemplate = Handlebars.compile(rawTemplate);
  let ourGeneratedHTML = compiledTemplate(ourData);
  
  let ourContainer = document.querySelector("#container");
  ourContainer.innerHTML = ourGeneratedHTML;
}
```

Of course I had to run handlebars.js #each twice, once for each Ajax response.