////////////////////////////////////
// Function to append items //
//////////////////////////////////
function addItems(data) {
var template = document.getElementById('items').innerHTML;
var handlebarsTemplate = Handlebars.compile(template);
var compiledTemplate = handlebarsTemplate(data);
document.getElementById('right').innerHTML = compiledTemplate;
}
///////////////////////////////////////
// Function to append list of items //
/////////////////////////////////////
function addList(data) {
var listTemplate = document.getElementById('list').innerHTML;
var handlebarsTemplate = Handlebars.compile(listTemplate);
var compiledListTemplate = handlebarsTemplate(data);
document.getElementById('left').innerHTML = compiledListTemplate;
}
/////////////////////////////////
// AJAX call //
///////////////////////////////
function fetchData() {
var request = new XMLHttpRequest();
request.open("GET", "/assets/data/items.json", true);
function onReadyStateChange() {
if(request.readyState === 4) {
if(request.status >= 200 & request.status <= 400) {
var data = request.responseText;
console.log(data);
addItems(data);
addList(data);
}
}
}
request.onreadystatechange = onReadyStateChange;
request.send();
}
and my Handlebars template is
<script type="x-handlebars-template" id="items">
{{#each this}}
<img src="{{img}}" class="{{class}}">
<p class="{{class}}" id="{{pid}}">{{description}}</p>
<a href="{{url}}" target="_blank">
<button class="try {{class}}" style="max-width: 49%; float: left; margin-right: 1%;">Try It</button>
</a>
<a href="{{source}}" target="_blank">
<button class="{{class}} try" style="max-width: 49%; float: right; margin-left: 1%;"><i class="fa fa-github" aria-hidden="true"></i> Code</button>
</a>
{{/each}}
</script>
and this is the sample data
[
{
"name": "Doinmin",
"img": "assets/img/doinmin.png",
"description": "This project started as a basic to-do app, but along the way I turned it into something that I use while practicing a musical instrument. The app can be used to deal with big tasks that can be broken down into smaller tasks, with each task being dealt
with for a certain amount of time. It prevents you from getting overwhelmed. The app is built using HTML5, CSS3, and jQuery. <br>The app is not fit for android based browsers because the alarm function doesn't work in android browsers, it is not allowed.
You may try the app or look up the source code on GitHub.",
"url": "http://doinmin.com/",
"source": "https://github.com/relentless-coder/Doinmin",
"class": "doin",
"pid": "dpara",
"lid": "doin"
},
{
"name": "Weather Clock",
"img": "assets/img/weather.png",
"description": "I built this app to practice CSS3 animations and improve skills in Angular.js. The app has clock, alarm clock, and weather functionality. This is an ongoing project, so more features will added in the future.<br> The app uses Angular.js, HTML, and
CSS3. I have used Angular.js controllers and services for the functionality, transform animations, and media queries to change the layout for responsive design. You may try the app or look up the source code on GitHub.",
"url": "weather.html",
"source": "https://github.com/relentless-coder/weather",
"class": "weather",
"pid": "wpara",
"lid": "weather"
}
]
my template isn't displaying any data. I am not getting any error either. I am guessing it has something to do with the data that I've provided, but I tried explicitly parsing it to JSON, but that gave me an error
Uncaught SyntaxError: Unexpected token
in JSON at position 331
at JSON.parse (<anonymous>)
at XMLHttpRequest.onReadyStateChange (work.js:63)