Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sonya Trachsel
Sonya Trachsel
13,674 Points

Help with AJAX, JSON and Handlebars template

I have a difficulty while working on a personal project and I'm stuck. I'm trying to have the portfolio items show up using JSON, AJAX and Handlebars. Before I implemented JSON and AJAX Handlebars showed up well, but I want to understand how to do it with AJAX. I've typed in the code below but the Portfolio item still doesn't show up and the console doesn't show any mistakes.

So here is the HTML 

<!DOCTYPE html>
<html>
    <head>
        <title>Sonya Trachsel - Front-End Developer</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
    </head>
    <body>
      <div id="content">
      </div> <!--Portfolio section closing tag-->
    <script src="js/handlebars-v4.0.5.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/portfolioItems.json"></script>
        <script src="js/script.js"></script>
        <script id="portfolio-template" type="text/template">
          <ul class = "rig columns-2">
            {{#each portfolio}}
              <li class="caption">
                <img id="portfolioImage" class="caption__media" class="imageSize" src="     {{img}}">
                <div class="caption-overlay">
                    <h3 class="caption__overlay__title" id="title">{{title}}</h3>
                    <div class="caption__overlay__content">
                      <div id="category">{{category}}</div>
                      <div id="publishedOn">Created: {{publishedOn}}</div>
                      <p id="description">{{description}}</p>
                    </div>
                </div>
              </li>
            {{/each}}
          </ul>
        </script>
  </body>

Script.js file

$(document).ready(function(){
  // Extract the text from the template
  var raw_template = $('#portfolio-template').html();
  // Complile that into an handlebars template
  var template = Handlebars.compile(raw_template);
  // Retrieve the placeHolder where the posts will be displayed
  var placeHolder = $('#content');
  // Fetch all portfolio items data from the server in JSON
  $.get('js/portfolioItems.json', function(data){
    console.log ('get status???');
    $(this).each(data, function(index, element){
      // Generate the HTML for each post
      var html = template(element);
      // Render the posts into the page
      placeHolder.append(html);
    }); // end each
  }); // end get
}); // end ready

portfolioItems.json file

[
    { "title": "test Name",
      "description": "test Decription",
      "publishedOn": "January 12th 2016",
      "category": "Website",
      "img": "./img/img1.jpg"
    },
]

Thank you!!!

2 Answers

Riley Manda
Riley Manda
1,163 Points
Riley Manda
Riley Manda
1,163 Points

Your json file does not have a root name.Make sure it has one,then use for each or each... {{#each rootobject}}

<h3 class="caption__overlay__title" id="title">{{title}}</h3> <div class="caption__overlay__content"> <div id="category">{{category}}</div> <div id="publishedOn">Created: {{publishedOn}}</div> <p id="description">{{description}}</p>

{{/each}

but you need a handlebars helper to handle each item aswell as parse the json file.

var Request = new XMLHttpRequest(); Request.open('GET', 'yourfile.json');.....

then...

function createHTML(lData) { var rawTemplate = document.getElementById("yourclass").innerHTML; var compiledTemplate = Handlebars.compile(rawTemplate); var ourGeneratedHTML = compiledTemplate(lData);

var lodgeContainer = document.getElementById("your-div"); your-div.innerHTML = GeneratedHTML; }

simhub
simhub
26,544 Points
simhub
simhub
26,544 Points

Hi Sonya,
i'm not that familiar with Handlebar.js,
but if i look at your code they're some things you could try:

First: "portfolioItems.json" - get rid of ',' 

[
    { "title": "test Name",
      "description": "test Decription",
      "publishedOn": "January 12th 2016",
      "category": "Website",
      "img": "./img/img1.jpg"
    },         ///<--- get rid of [comma] ','
]

Secondly: "script.js" - leave (this) at home ;) 

     $.each(data, function(index, element){ ....   /// NOT $(this).each(){...}

Thirdly: "HTML" - don't use {{#each}} here / but if you need to use it, i guess you have to reconstruct your ".json" File 

 <script id="portfolio-template" type="text/template">
          <ul class = "rig columns-2">

              <li class="caption">
                <img id="portfolioImage" class="caption__media" class="imageSize" src="     {{img}}">
                <div class="caption-overlay">
                    <h3 class="caption__overlay__title" id="title">{{title}}</h3>
                    <div class="caption__overlay__content">
                      <div id="category">{{category}}</div>
                      <div id="publishedOn">Created: {{publishedOn}}</div>
                      <p id="description">{{description}}</p>
                    </div>
                </div>
              </li>

          </ul>

Sorry I 'm not an expert :(

That are only suggestions.