JS templating and rendering json data
<script type="text/template" data-template="apkItem">
<div class="apk-box">
<div class="apk-version d-flex align-items-center justify-content-between">
<div class="divider">
<div class="title">
<span class="ver-name">${version_name} </span><span class="date">${updated_on}</span>
</div>
<a class="ver-link" href="javascript:void(0);">${apk_filename}</a>
</div>
<a style="display:none" href="./app/${apk_filename}" class="dl-btn download_allow" data-download-allow="${download_allow}">
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M220 896q-24 0-42-18t-18-42V693h60v143h520V693h60v143q0 24-18 42t-42 18H220Zm260-153L287 550l43-43 120 120V256h60v371l120-120 43 43-193 193Z"/></svg>
</a>
</div>
<div class="apk-info">
<span class="memo">メモ</span><br>
<p>${update_memo}</p>
</div>
</div>
</script>
<script type="text/javascript" src="./js/jquery-3.6.4.js"></script>
<script type="text/javascript">
function render(props) {
return function (tok, i) {
return (i % 2) ? props[tok] : tok;
};
}
$(document).ready(function(){
$.getJSON('./json/data.json', function (data) {
var header = data.app_header;
var headerEl = $(".apk-logo-wrapper");
var headerTpl = $('script[data-template="header"]').text().split(/\$\{(.+?)\}/g);
headerEl.html(headerTpl.map(render(header)).join(''));
var list = data.version_info;
var listEl = $(".apk-wrapper");
var listTpl = $('script[data-template="apkItem"]').text().split(/\$\{(.+?)\}/g);
listEl.html(list.map(function (item) {
return listTpl.map(render(item)).join('');
}));
$(".download_allow[data-download-allow='1']").show();
});
});
</script>