Results 1 to 7 of 7

Thread: Accessing an API using Handlebars.js

  1. #1
    Join Date
    Jan 2017
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Accessing an API using Handlebars.js

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 03-19-2018 at 03:19 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 03-19-2018 at 04:08 PM. Reason: add link to demo, later remove link to demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jan 2017
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jan 2017
    Posts
    27
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Right. Those were the two things.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 1
    Last Post: 06-19-2009, 01:53 AM
  2. Need help in accessing code.
    By maggioa64 in forum Looking for such a script or service
    Replies: 0
    Last Post: 03-09-2008, 02:58 PM
  3. php accessing database field
    By boogyman in forum PHP
    Replies: 1
    Last Post: 03-22-2007, 04:13 PM
  4. Accessing a pages's element from another page !!!!
    By codeexploiter in forum JavaScript
    Replies: 4
    Last Post: 01-15-2007, 02:29 PM
  5. accessing dynamic text box
    By sri_madhu in forum JavaScript
    Replies: 0
    Last Post: 10-09-2005, 02:06 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •