Création d'un format json à partir du DOM

Version imprimable

Bonjour, Je viens vers vous car j'ai un petit soucis avec la création d'un objet Json.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
function enregistrer() {
 
var json
var dom = document.getElementById('dropzone').children
 
//if (dom[0].className == 'full'){
 
var DOM = []
 
    if (dom[0].className == 'full'){
    objet = {
        id : dom[0].firstChild.id, 
        class : dom[0].firstChild.className ,
        place : dom[0].firstChild.getAttribute('place') ,
        name : dom[0].firstChild.getAttribute('name') ,
        value : dom[0].firstChild.getAttribute('value') ,
        draggable : dom[0].firstChild.getAttribute('draggable'), 
        ondragstart : dom[0].firstChild.getAttribute('ondragstart')    
    }
    DOM.push(objet)
    }
    if (dom[1].className == 'full'){
    objet = {
        id : dom[1].firstChild.id, 
        class : dom[1].firstChild.className ,
        place : dom[1].firstChild.getAttribute('place') ,
        name : dom[1].firstChild.getAttribute('name') ,
        value : dom[1].firstChild.getAttribute('value') ,
        draggable : dom[1].firstChild.getAttribute('draggable'), 
        ondragstart : dom[1].firstChild.getAttribute('ondragstart')
    }
    DOM.push(objet)
    }
 
    if (dom[2].className == 'full'){
    objet = {
        id : dom[2].firstChild.id, 
        class : dom[2].firstChild.className ,
        place : dom[2].firstChild.getAttribute('place') ,
        name : dom[2].firstChild.getAttribute('name') ,
        value : dom[2].firstChild.getAttribute('value') ,
        draggable : dom[2].firstChild.getAttribute('draggable'), 
        ondragstart : dom[2].firstChild.getAttribute('ondragstart')
    }
    DOM.push(objet)
    }
 
json = JSON.stringify(DOM)
 
 
$.post("./php/sauvegarde.php",
        {
                result : json
 
        })
    }

Cela fonctionne, le problème c'est que ça va jusqu’à dom[29] du coup c'est un peu lourd et je suis sur que je peux factoriser ça mais je ne sais pas comment. J'ai essayé un truc comme ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
for (var i = 0 ; i < 29 ; i++)
if (dom[i].className == 'full'){
    objet = {
        id : dom[i].firstChild.id, 
        class : dom[i].firstChild.className ,
        place : dom[i].firstChild.getAttribute('place') ,
        name : dom[i].firstChild.getAttribute('name') ,
        value : dom[i].firstChild.getAttribute('value') ,
        draggable : dom[i].firstChild.getAttribute('draggable'), 
        ondragstart : dom[i].firstChild.getAttribute('ondragstart')    
    }
    DOM.push(objet)

mais forcement ça ne marche pas :) du coup je ne vois pas trop

22/02/2017, 20h01
badaze
Essaie avec
Code:

1 2 for (var i = 0 ; i < dom.length ; i++)
22/02/2017, 20h54
nicdodo

Bonjour, oui j'avais essayé ça aussi

dans le cas de for (var i = 0 ; i <29 ; i++) la consoile me dit dom[i] is not a function
dans le cas de for (var i = 0 ; i <dom.length ; i++) la consoile me dit dom[i] is undifined

:/
22/02/2017, 21h33
badaze

Peux tu poster le contenu de dropzone ? Quels sont les éléments qui sont dedans ?
J'ai fait un essai avec un input dans un div lui même dans un div et j'ai eu une erreur parce que input n'est pas draggable.

Voila

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
35
36
37
 <div id = "dropzone" draggable="false">
 
   <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "2" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "4" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "5" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "6" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "7" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "8" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "9" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "10" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "11" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "12" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "13" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "14" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "15" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "16" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "17" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "18" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "19" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "20" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "21" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "22" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "23" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "24" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "25" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "26" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "27" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "28" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "29" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "30" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
 
</div>
 
<input type = "button" id = "save" value = "enregistrer"  onclick = 'enregistrer()'/> 
<input type = "button" id = "charge" value = "charge"  onclick = 'loadJSON()'/>

et la div qui peut s'integrer dans les differnetes div class = "empty"

Code:

1
2
3
4
5
 <div id = "dragzone">
 
        <div  id = "0" class = "src_file" place = "" name = "" value ="" draggable="true" ondragstart="glisser(this,event)">
              <p>fichier</p>
        </div>

En gros avec le drag and drop j'attrape la div enfant de dragzone et je la place dans une div enfant de dropzone en la clonant

22/02/2017, 21h46
badaze

Je ne vois nulle part d'objet avec la class = 'full'

En fait la class full existe des lors qu'une div enfant de dragzone est cloné dans un enfant de dropzone.
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id = "dropzone" draggable="false"> <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div> <div id = "2" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"> <div id = "1" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"> </div> <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div> ....... </div>
En gros si je déplace ma div enfant de dragzone dans la div id = "2" enfant de dropzone plusieurs choses se passent:

Pour l'enfant de dropzone : la class passe de "empty" à "full"
Pour la div intégré : la class passe de "src_file" à "droppedfile", son id est incrémenté de 1 et son attribut "place" prend la valeur de l'id conteneur

Essaie ça.
Fais attention aux id. Dans l'exemple que tu donnais il y avait 2 fois id="1".

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head>
<script>
function enregistrer() {
 
var json
var dom = document.getElementById('dropzone').children;
  
var DOM = [];
for (i=0;i<dom.length;i++) {
 monObjet = dom[i];
 if (monObjet.className == 'full') {
   petitFils = monObjet.children[0];
   objet = {
        id : petitFils.id, 
        class : petitFils.className ,
        place : petitFils.getAttribute('place') ,
        name : petitFils.getAttribute('name') ,
        value : petitFils.getAttribute('value') ,
        draggable : petitFils.getAttribute('draggable'), 
        ondragstart : petitFils.getAttribute('ondragstart')    
      }
   DOM.push(objet);
 }
}
json = JSON.stringify(DOM);
alert(json);
}
</script>
</head>
<body>
<div id = "dropzone" draggable="false">
 
  <div id = "1" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "2" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x1" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>
  </div>
        <div id = "3" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "4" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "5" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x2" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "6" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "7" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "8" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "9" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "10" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "11" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x3" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "12" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "13" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "14" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x4" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "15" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "16" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "17" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "18" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "19" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x5" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "20" class = "full" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)">
   <div  id = "x6" class = "droppedfile" place = "2" name = "" value ="" draggable="true" ondragstart="glisser(this,event)"></div>  
  </div>
        <div id = "21" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "22" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "23" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "24" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "25" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "26" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "27" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "28" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "29" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
        <div id = "30" class = "empty" ondragleave= "leave(this,event)" ondragover="over(this,event)" ondrop="deposer(this,event)"></div>
 
</div>
 
<input type = "button" id = "save" value = "enregistrer"  onclick = 'enregistrer()'/> 
</body>
<html>

22/02/2017, 23h59
nicdodo

C'est super ça marche merci beaucoup faut vraiment que je travail sur l’algorithmie mais ça viendra avec l’expérience et l'apprentissage de connaissance. Pouvait m'indiquer certaine choses que je n'ai pas forcement compris.

Encadrer le texte qui dépend de la boucle for permet d’empêcher la propagation de la boucle au travers d'autre ligne de code qui pourrait se situer après?
Quand vous mettez monObjet = dom[i] vous affecter dom[i] à la variable monObjet. Parfois si je ne déclare pas la variable au préalable la console me dit "variable not definited". Dans quel cas on est pas obligé de définir la variable?