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

1

Hi,

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

fetch.all and Handlebars.js

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?

2

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.

1 Like
3

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

HTML

  <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

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.