5 Replies - 487 Views - Last Post: 05 July 2018 - 04:46 AM

#1 kayut   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 20-January 17

fetch.all and Handlebars.js

Posted 04 July 2018 - 12:27 AM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: fetch.all and Handlebars.js

#2 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: fetch.all and Handlebars.js

Posted 04 July 2018 - 12:35 AM

Please post the relevant code directly here in the thread between code tags, not just as an external link.
Was This Post Helpful? 0
  • +
  • -

#3 kayut   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 20-January 17

Re: fetch.all and Handlebars.js

Posted 04 July 2018 - 12:50 AM

Here is the code.

HTML:
<ul id="container" class="cf"></ul>

<script id="ourTemplate" type="text/x-handlebars-template">
{{#each this}}
<li class='main-container'>
  <div class='img-container'><img src="{{ image_url }}"></div>
  <div class='name-container'>{{ name }}</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 = {"apiRequest1":{},"apiRequest2":{}};

Promise.all([apiRequest1,apiRequest2]).then(function(values){
  combinedData["apiRequest1"] = values[0];
  combinedData["apiRequest2"] = values[1];
  console.table(combinedData);
  // createHtml(combinedData.apiRequest1.results);
  createHtml(combinedData.apiRequest2.staff);
  return combinedData;
});


// Handlebars.JS function to generate the HTML
function createHtml(ourData) {
  let rawTemplate = document.querySelector("#ourTemplate").innerHTML;
  let compiledTemplate = Handlebars.compile(rawTemplate);
  let ourGeneratedHTML = compiledTemplate(ourData);
  
  let ourContainer = document.querySelector("#container");
  ourContainer.innerHTML = ourGeneratedHTML;
}


Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: fetch.all and Handlebars.js

Posted 04 July 2018 - 05:15 AM

What do the two sets of data (objects) look like?

How can I merge properties of two Javascript objects dynamically?
Was This Post Helpful? 1
  • +
  • -

#5 kayut   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 44
  • Joined: 20-January 17

Re: fetch.all and Handlebars.js

Posted 05 July 2018 - 03:53 AM

I managed to fix it 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.

This post has been edited by kayut: 05 July 2018 - 03:55 AM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: fetch.all and Handlebars.js

Posted 05 July 2018 - 04:46 AM

That object spread rest syntax, as described at the answer I posted, is from ES2018 (or ES2015 according to MDN). You might need to be concerned about browser support.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1