<html>
<head>
<title>Print labels</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="tuto">
<li v-for="(value, index) in fruits" @click="getFruit(index)">
{{ index }} => {{ value }}
</li>
</ul>
<!---<div>
<div id="test" v-for="value in labels" @click="clickLabel()">
{{ value }}
</div>
</div>-->
</body>
<script>
function request(address) {
var xhr = new XMLHttpRequest();
/*xhr.onreadystatechange = function () {
//if (xhr.readyState == 4)
//alert("reponse = " + xhr.responseText);
};*/
xhr.open("GET", "http://127.0.0.1:5000/"+address, false);
xhr.send();
return (xhr.responseText);
};
//add \t to the child in function
function print_elem(txt, nb_tabs) {
var new_msg = "";
for (var i = 0; i < nb_tabs; i++)
new_msg += '\t';
new_msg += txt;
console.log(nb_tabs + new_msg);
}
//print the tab that represent labels with theirs childs
function print_tab(tab, nb_tabs) {
for (var i = 0; tab[i]; i++) {
if (Array.isArray(tab[i - 1]))
nb_tabs--;
if (Array.isArray(tab[i])) {
nb_tabs++;
print_tab(tab[i], nb_tabs)
} else
print_elem(tab[i], nb_tabs);
}
}
var tab = ['addition', 'soustraction', 'complexe', ['c1', 'c2', ['lol1', 'lol2'], 'c3'], 'easy', ['un', ['deux', ['trois', ['quatre']]]], 'ok'];
var labels_tab = JSON.parse(request("get_datas/labels"))
var labels_list = []
for (var i = 0; labels_tab[i]; i++) {
if (labels_tab[i][2] == null)
labels_list.push(labels_tab[i][0])
}
console.log(labels_tab)
console.log('\n================\n', labels_list)
console.log(labels_tab[0][2])
//crrer l'espece de liste sur la gaucje
//print_tab(tab, 0);
/*new Vue({
el: '#test',
data: {
labels: ['a', 'b', 'c']
},
methods: {
clickLabel: function() {
alert("clique");
}
}
});*/
new Vue({
el: '#tuto',
data: {
fruits: [
'pomme',
'cerise',
'abricot'
]
},
methods: {
getFruit: function(index) {
alert('Je suis ' + this.fruits[index]);
}
}
});
</script>
</html>