Integrate JSON + Javascript inside website template

Question

I am creating online resume with a free template I downloaded. This template uses bootstrap and displays a progress-bar of my skills. But now I would like these skills to be changed dynamically using JSON.

I created my file :

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

So it's easy to display it but I would like to format it using the template.

This is an example from the template :

<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>

How to do make title from JSON be linked to class="progress-title" I did a fiddle : https://jsfiddle.net/de6f9qwo/37/

Thanks in advance for the help !

progress-bar preview

That is not JSON, that is an Array literal. Also your fiddle doesn't work as you are trying to append invalid html — Patrick Evans, Feb 24 '18 at 20:21
Yes my fiddle isn't working because I do not close the first "div" but I need to close it at the end and have no idea of how to do it, this array will be later stored in a specific file — , Feb 24 '18 at 20:27
Well ok my loop is broken cause it adds skills to every progress-item as I need the first one then the second one etc. — , Feb 24 '18 at 20:37

score 0 · Accepted Answer · answered Feb 24 '18 at 20:39

you asked very general question with many different answers, but the answer to your problem with your open div is something like this :

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>

but the real solution for templating is rather a good library like these https://www.creativebloq.com/web-design/templating-engines-9134396 or read this JavaScript equivalent to printf/string.format to make a proper way of doing it manually.

Haha I am so dumb. I know understand that I need to use variable. Thanks for the help I appreciate ! — , Feb 24 '18 at 20:43

Integrate JSON + Javascript inside website template

1 Answers1