在网站模板中集成JSON JAVASCRIPT

Question

我正在使用我下载的免费模板创建在线简历。该模板使用bootstrap并显示我技能的进度杆。但是现在我希望使用JSON动态更改这些技能。

我创建了我的文件：

var Skills = [
{
    "title": "Skill 1",
    "description": "Skill 1 description",
    "value": 100
},
{
    "title": "Skill 2",
    "description": "Skill 2 description",
    "value": 100
}];

，因此很容易显示它，但我想使用模板进行格式化。

这是模板中的一个示例：

<div class="progress-item">
    <span class="progress-title">Skill 1</span>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" style="width: 62%"><span class="progress-percent"> 62%</span>
        </div>
    </div>
</div>

如何使JSON的标题与class =" progress-title"链接起来。我做了一个小提琴：https：//jsfiddle.net/de6f9qwo/37/

事先感谢您的帮助！

Progress-Bar预览

Answer 1

您提出了许多不同答案的非常普遍的问题，但是您对开放div的问题的答案就是这样：

var Skills = [
{
    "title": "Skill 1",
    "description": "Skill 1 description",
    "value": 100
},
{
    "title": "Skill 2",
    "description": "Skill 2 description",
    "value": 100
}];
$.each(Skills, function (title, val) {
    var $div_item = $('<div class="progress-item"></div>');
    $div_item.append("<span class='progress-title'>" + val.title + "</span>");
    $('.progress-wrapper').append($div_item);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrapper"></div>

但是，模板的真正解决方案是这样的好库https://www.creativebloq.com/web-design/templating-engines-9134396或读取此JavaScript等效于printf/string.format，以手动执行正确的方式。