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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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