Bonsoir, bon je suis dans le dur en ce moment, j'arrive plus à rien, étant débutant je me heurte au mur de l'expérience et je viens encore une fois en peu de temps vers le forum pour m'aider à trouver des solutions et acquérir de l'expérience.

Mon problème concerne une boucle que je ne sais pas comment organiser. J'expose mon problème j'ai une collection d'objet chaque objet ayant les mêmes attributs mais les attributs n'ont pas les même valeurs. Je vais prendre une collection de 3 objets pour exemple

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
console.log(data) 
RESULTAT : Array [ Object, Object, Object ]
 
for (let i of data){
console.log(i)
}
RESULTAT : Object { id: "1", class: "droppedfile", place: "2", name: "", value: "", draggable: "true", ondragstart: "glisser(this,event)" }  
                  Object { id: "2", class: "droppedfile", place: "4", name: "", value: "", draggable: "true", ondragstart: "glisser(this,event)" }  
                  Object { id: "3", class: "droppedfile", place: "6", name: "", value: "", draggable: "true", ondragstart: "glisser(this,event)" }
Le but est de transformer ces objets en éléments du DOM. L'attribut object.place correspond au numéro de la div qui sera sont parents

Mon HTML est le suivant :

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>

J'ai fait ça en Javascript

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
35
36
37
38
39
40
41
42
 
function loadJSON(){
 
var dom = document.getElementById('dropzone').children    
var div = document.createElement('div')
var p = document.createElement('p')
var maData
var monDom
 
$.getJSON('./json/modif.json', function( data ) {
 
    for (var f = 0 ; f < dom.length ; f ++ ){
    for (var i = 0 ; i < data.length ; i ++){
    monDom = dom[f]
    maData = data[i]
 
    if (monDom.id === maData.place  ){
 
        monDom.appendChild(div)
        div.id = maData.id
       div.className = maData.class
       div.setAttribute("place", maData.place)
       div.setAttribute("name", maData.name)
       div.setAttribute("value", maData.value)
       div.setAttribute("draggable", maData.draggable)
       div.setAttribute("ondragstart", maData.ondragstart)
       div.appendChild(p)
           if (div.className == 'droppedfile'){
               if (div.getAttribute('name') != ''){
                   p.innerHTML = div.getAttribute('name')
               } else {
                   p.innerHTML = 'dossier'
               }
            }    
        }
    }
}
 
 
})
 
}
Je pense que vous aurez compris mon idée sauf que ça ne marche pas, il n'y a que le dernier objet de la collection qui se place dans la div id = 6 de mon DOM et je n'arrive pas à comprendre pourquoi. J'ai fait des schéma sur papier avec des colonnes, la représentations des boucles les incrémentations fin voila j'ai cherché sur internet des explications sur les boucles, break, continue, etc pas moyen que j'arrive à me représenter ça ni mentalement ni sur le papier du coup je suis encore obligé d'en appeler à votre expérience pour me donner u petit coup de main. Ça clôturera mon petit module et après j'attaque un nouveau chapitre de mon auto formation du coup je devrais plus vous embêter avant un petit moment avec mes questions de débutant