Double boucle ou boucle avec 2 variables

Version imprimable

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:

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:

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:

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 :)

23/02/2017, 09h54
badaze

Quel est le but de tout cela?
23/02/2017, 10h00
nicdodo

Bonjour badaze tu es mon super héros en ce moment ;). Le but est de récupérer les objets de ma collection et les intégrer dans le DOM à la bonne place. J'ai vu un tuto qui me semblait pas mal mais j’arrive pas à l'appliquer. Je passe tellement d'heure a essayer des trucs dans le vide c'est frustrant. C'est en fait la suite logique de mon précédent post celui de récupérer les éléments du DOM dans un fichier json, la c'est l'inverse c'est récupérer le fichier json et intégrer les éléments au DOM
23/02/2017, 11h21
badaze

Pourquoi ne limites tu pas à sauvegarder le HTML présent dans le DIV principal ?
23/02/2017, 11h49
nicdodo

Oui c'est vrai le truc c'est que en tant que débutant j'essaie d'apprendre et au début j'ai fait ça en enregistrant le html entier de dropzone dans un fichier txt comme vous m'aviez conseillé et effectivement ça marche. Du coup j'en ai parlé et on m'a dit qu'a terme il faudrait que je fasse ça au format Json du coup je m'y suis mis. Sauf que enregistrer tout le html au format Json je me suis rendu compte que pour mon niveau ça demandé trop d'imbrication d'ou mon post précédent sur la boucle pour organiser mon json. Mais du coup pour récupérer celui la c'est vraiment galère. Au final je sais pas trop si le format json est réellement fait pour ça et si un simple fichier text n'est pas suffisant. Apres c'est toujours pas mal de chercher la difficulté dans mon cas. J'ai un mois et demi avant d'attaquer une grosse formation php dans le cadre d'une reconversion professionnnelle du coup j'apprend tout ce que je peux sur le js avant histoire d'avoir de bonnes bases et ne pas me limiter qu'à un seul language et pour le coup je trouve que cette exercice de double boucle imbriquées et pas mal, je pense que c'est une situation que je serais emmené à retrouvé un jour et avoir un peu d'expérience pour résoudre ça me semblait pas mal
23/02/2017, 12h22
badaze

La je suis au taf. Je regarderai ça ce soir si ça n'a pas été résolu.
Toutefois. Je ne sais pas pourquoi on t'a conseillé de le faire en json car si tu ajoute un attribut sur le html que tu génère il te faudra modifier ton programme pour transmettre et pour le récupérer alors que si tu sauvegardes le html tu n'as rien à modifier sur ces parties.
23/02/2017, 12h33
nicdodo

Je ne sais pas, en tout cas je repars sur l'idée du fichier txt et du coup mon problème d'actualisation est résolu ;). C'est pas évident d'apprendre solo, on prend de mauvaise habitudes, on comprend pas forcément à quoi serve tel ou tel méthode et au final on se retrouve à ne pas utiliser de bon process ou faire des impasses. Apres le but de mon projet c'est surtout de m'apprendre des trucs, le get_put_content par exemple ou les boucles à 2 variables, etc ça permet de mettre en pratique et d'acquérir de l'expérience. Je vous remercie de votre temps je vois que vous etes super actif sur le forum c'est super que vous preniez de votre temps pour aider, ça motive vachement

Prends l'habitude de terminer les instructions avec ;

Compare mon code avec le tien.

Ca ne pouvait pas marcher car tu crées un seul élément DIV et un seul P au début alors qu'il faut les créer quand on en a besoin.
J'ai enlevé le test if (monDom.id === maData.place ){
Il n'y a pas besoin d'une double boucle tu ajoute des éléments au DIV dropzone. J'ai ajouté monDom.innerHTML = ""; pour que le clic sur charger n'ajoute pas le HTML mais le remplace.
J'ai ajouté du code qui s'exécute quand $.getJSON est terminée afin d'afficher le code HTML présent dans dropzone.

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
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
function loadJSON(){
 
var dom = document.getElementById('dropzone');    
var maData;
var monDom;
monDom = dom;
monDom.innerHTML = "";
// $.getJSON('./json/modif.json', function( data ) chez moi je mets le fichier dans le même répertoire que celui du script
$.getJSON('modif.json', function( data ) {
 
    for (var i = 0 ; i < data.length ; i ++){
    
    maData = data[i];
 
    //if (monDom.id === maData.place  ){
  var div = document.createElement('div');
        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);
  
  var p = document.createElement('p');
  div.appendChild(p);
           if (div.className == 'droppedfile'){
               if (div.getAttribute('name') != ''){
                   p.innerHTML = div.getAttribute('name');
               } else {
                   p.innerHTML = 'dossier';
               }
            }    
    //}
    }
 
 }
)
.done(
  function () {
    document.getElementById('viewHTML').value = document.getElementById('dropzone').innerHTML;
  }
 );
}
 
</script>
</head>
<body>
<div id = "dropzone" draggable="false">
</div>
 
<input type = "button" id = "save" value = "Charger"  onclick = 'loadJSON()'/> 
<br/>
Code HTML du DIV dropzone
<textarea id = "viewHTML" rows="20" cols="80"></textarea>
</body>
</html>

au top merci beaucoup^et oui le createElement pouvais pas se créer 3 fois en dehors du if forcement. Du coup j'ai pas trop compris votre code, j'ai juste eu à modifier la place du createElement et ça marche au top ;)

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
 
function loadJSON(){
 
 
 
$.getJSON('./json/modif.json', function( data ) {
 
var dom = document.getElementById('dropzone').children   
var p 
var maData
var monDom
 
    for (var i = 0 ; i < data.length;i++){
    for (var f = 0 ; f < dom.length; f++){   
        maData= data[i]
        monDom= dom[f]
 
         if (monDom.id === maData.place ){
 
        var div = document.createElement('div')
        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)
 
       p = document.createElement('p')
       div.appendChild(p)
           if (div.className == 'droppedfile'){
               if (div.getAttribute('name') != ''){
                   p.innerHTML = div.getAttribute('name')
               } else {
                   p.innerHTML = 'dossier'
               }
            }
        }
 
    }
}
 
})
}