Accessing an API using Handlebars.js

**kayut** · 03-19-2018, 02:47 PM

Hi,

I'm able to access this API and show that one product inside the API:

API for one product

Now I want to display more than a product by accessing another API which is an array of products with the following code, but it doesn't work. What is the problem?

API for many products

Thanks

**jscheuer1** · 03-19-2018, 03:15 PM

OK, there could also be other problems. But your fetch address is missing the:

Code:

cors-anywhere.herokuapp.com/

part. You have:

Code:

fetch("https://matchesfashion.com/nms/ajax/p/1185545,1181918,1188952,1186721,1186396,1177398,1217459,1177486,1186168,1177405,1184983")

But it should be:

Code:

fetch("https://cors-anywhere.herokuapp.com/matchesfashion.com/nms/ajax/p/1185545,1181918,1188952,1186721,1186396,1177398,1217459,1177486,1186168,1177405,1184983")

The reason I say there could also be other problems is that this returns an array of objects instead of a single object that the successful single product code does. But it at least looks like you're attempting to account for that. I'll try it in your pen and see what happens.

OK, just did that, and get a new error at least (the previous error was that nothing was fetched), and it appears to apply to what I was saying:

Must pass iterator to #each

Not sure how that part works in handlebar though. Might be able to figure it out, or maybe you can.

**jscheuer1** · 03-19-2018, 03:42 PM

OK, I lucked out. Here's a working demo (note, do not copy code from a message the forum may send you, it might be corrupted, instead, log on to the forum and copy directly from the post):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
</head>
<body>
<ul id="container"></ul>

<script id="ourTemplate" type="text/x-handlebars-template">
  {{#each this}}
  <li class='product-container'>
    <div>
      <a href="https://matchesfashion.com{{ url }}" target="_blank">{{ name }}</a>
    </div>
    <div class='img-container'>
      <img src=" {{ thumbnail }} ">
    </div>
    <div>Number in stock: {{ stock.stockLevel }}</div>
    <div class='price-container'>Price: {{ priceData.formattedPriceWithoutDecimals }}</div>
  </li>
   {{/each}}
</script>
<script>
fetch("https://cors-anywhere.herokuapp.com/matchesfashion.com/nms/ajax/p/1185545,1181918,1188952,1186721,1186396,1177398,1217459,1177486,1186168,1177405,1184983")
.then(function(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  // Read the response as json.
  // console.log( response.json());
  return response.json();
})
.then(function(response) { 
  // Do stuff with the JSON
  // console.log(response);
  createHtml(response);
})
.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
  var rawTemplate = document.querySelector("#ourTemplate").innerHTML;
  var compiledTemplate = Handlebars.compile(rawTemplate);
  var ourGeneratedHTML = compiledTemplate(ourData);
  
  var ourContainer = document.querySelector("#container");
  ourContainer.innerHTML = ourGeneratedHTML;
}
</script>
</body>
</html>

**kayut** · 03-19-2018, 03:52 PM

Dear @John,
Thank you sooooooo much for your help and the time you invested to help me. I really appreciate it.
1000 Thanks again.

**jscheuer1** · 03-19-2018, 04:11 PM

You're welcome. BTW - not sure if you noticed it, but I had put up a live demo. Then I realized I was potentially participating in some e-commerce, so decided to take it down. All the code needed to get this to work is in my post though. Let me know if you need the live demo again, I can leave it up for a day or two if necessary.

**kayut** · 03-19-2018, 04:17 PM

Sure, but the only thing I had to change in my example to make it work, was changing {{#each}} to {{#each this}} and it's working now:

https://codepen.io/itsthomas/pen/qoqMWz?editors=1010

PS: and of course updated the URL by adding cors-anywhere.herokuapp.com/ to it.