jQuery, JSON et Spacetree
Bonjour, étant désespéré et ne trouvant aucune réponse chez mon ami google, je me tourne vers vous.
Je souhaite utiliser un plugin (Spacetree JIT) pour faire un organigramme (c'est le seul qui fait exactement ce que je recherche).
Le problème c'est que dans les exemples du plugin, il utilisent du JSON pour les données alors que je n'ai pas d'autres choix que d'utiliser un liste html (UL/LI/div)
J'ai donc recherché un script qui traite ma liste pour en faire un JSON.
Cela semble fonctionner (exactement le bon résultat dans les logs (console.log(json)) mais le plugin ne m'affiche pas mes données.
Voici l'exemple qui fonctionne :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| var json2 = {
id : "node02",
name : "0.2",
data : {},
children : [ {
id : "node13",
name : "1.3",
data : {},
children : []
}, {
id : "node125",
name : "1.25",
data : {},
children : []
} ]
}; |
Voici ma liste :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <ul id="data_json">
<li>
<div id="node02">0.2</div>
<ul>
<li>
<div id="node13">1.3</div>
</li>
<li>
<div id="node125">1.25</div>
</li>
</ul>
</li>
</ul> |
Et enfin le script de conversion que j'ai trouvé :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| function children(node, selector) {
var res = [], nodes = node.childNodes, l = nodes.length;
for (var i = 0; i < l; i++) {
if (nodes[i].nodeType === 1) {
if (selector && nodes[i].tagName.toLowerCase() === selector) {
res.push(nodes[i]);
} else if (!selector) {
res.push(nodes[i]);
}
}
}
return res;
}
function treeHTML(element) {
var o = {};
var div = children(element, 'div');
o.id = div[0].id;
o.name = div[0].innerHTML;
o.data = {};
o.children = [];
var ul = children(element, 'ul');
for (var i = 0; i < ul.length; i++) {
var li = children(ul[i]);
for (var j = 0; j < li.length; j++) {
o.children.push(treeHTML(li[j]));
}
}
return o;
}
var root = document.getElementById("data_json");
var json = treeHTML(children(root)[0]); |
Je rappelle encore une fois que dans la console des navigateurs, console.log(json) et console.log(json2) me retournent exactement la même chose.
En revanche (json == json2) retourne false.
EDIT :
Code:
1
2
3
| if(_.isEqual(json, json2)){
alert("true");
} |
retourne bien true
Savez vous ce qui diffère et comment y remedier ?
J'espère que vous saurez me sauver.
Merci d'avance, Julien.
EDIT : Sujet résolu, j'ai finalement pu passer directement par du JSON
