I'm trying to use template to create cells in a table but the code only works in google chrome, does anyone know why?
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Handlebars.js tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><linkrel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<section id="content"></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script><scriptid="example-template" type="text/x-handlebars-template">
</table>
<table >
<thead>
<tr>
<th>team name</th>
<th>position</th>
</tr>
</thead>
{{#each array1}}
<tbody>
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
<script src="app.js"></script>
</body>
</html>
app.js
var $orders = $('#orders');
var array1 = [];
var array2 = [];
function parse(){
$.ajax({
headers: { 'X-Auth-Token': '69e49cf35c7346fcb819f023cf0b98d4' },
url: 'http://api.football-data.org/v1/soccerseasons/398/leagueTable',
dataType: 'json',
type: 'GET',
}).done(function(response) {
var regex = /.*?$/;
for (i = 0; i < 20; i++) {
array1.push({name:response.standing[i].teamName, age:response.standing[i].position,email:1});
console.log(array1[i]);
}
var a = {
array1
};
var theTemplateScript = $("#example-template").html();
var theTemplate = Handlebars.compile(theTemplateScript);
var theCompiledHtml = theTemplate(a);
$(document.body).append(theCompiledHtml);
});
}
(function(){
parse();
})();