Parser un json multiniveaux dans une dropdownlist.

**fredalva** · 29/03/2019, 17h41

Bonjour , je cherche désespérement à mettre à jour dynamiquement une dropdownlist via ajax.
Voici le json_encode qui m'est retourné:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 data = 
[{"id":3,"content":"Fiat","order":1,"children":[{"id":5,"content":"2roue","order":1,"children":[{"id":1,"content":"Voitures","order":1,"children":null,"parent":5,"level":3},{"id":2,"content":"Renault","order":2,"children":null,"parent":5,"level":3}],"parent":3,"level":2}],"parent":0,"level":1},{"id":5,"content":"2roue","order":1,"children":[{"id":1,"content":"Voitures","order":1,"children":null,"parent":5,"level":3},{"id":2,"content":"Renault","order":2,"children":null,"parent":5,"level":3}],"parent":3,"level":2},{"id":1,"content":"Voitures","order":1,"children":null,"parent":5,"level":3},{"id":4,"content":"Scenic","order":2,"children":null,"parent":0,"level":1}]

A partir de là si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
                $.each(JSON.parse(data), function (key, entry) {
 
                    dropdown.append($('<option></option>').attr('value', entry.id).text(entry.content));
 
                });

je n'ai que les catégories de 1er niveau, y a t'il une méthode pour parser récursivement le JSON et avoir tous les niveaux?

En fait je cherche à recréer la liste complète dans l'ordre reçu avec un décalage pour les enfants comme ceci:

FIAT
-2roues
--voitures
--renault
Scenic

Merci pour votre aide

**psychadelic** · 30/03/2019, 15h37

relis ta doc..

JSON.parse transforme du texte en json.

ta variable data est déjà du json, donc pas besoin de la transformer en json

Sinon JSON fait partie de l'adn de JavaScript, utiliser jQuery pour parcourir une arborescence json, c'est un peu délirant (amha)

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>JSON => select </title>
  <style>
    #vehicules {  width: 12em; }
  </style>
</head>
<body>
 
  <select id="vehicules" size="11"></select>
 
  <script>
    const data = [
      {
        "id": 3, "content": "Fiat", "order": 1, "children":
          [
            { "id": 5, "content": "2roue", "order": 1, "children":
              [
                { "id": 1, "content": "Voitures", "order": 1, "children": null, "parent": 5, "level": 3 }, 
                { "id": 2, "content": "Renault", "order": 2, "children": null, "parent": 5, "level": 3 }
              ],
              "parent": 3,
              "level": 2
            }
          ],
        "parent": 0,
        "level": 1
      },
      {
        "id": 5, "content": "2roue", "order": 1, "children":
          [
            { "id": 1, "content": "Voitures", "order": 1, "children": null, "parent": 5, "level": 3 }, 
            { "id": 2, "content": "Renault", "order": 2, "children": null, "parent": 5, "level": 3 }
          ],
        "parent": 3,
        "level": 2
      },
      { "id": 1, "content": "Voitures", "order": 1, "children": null, "parent": 5, "level": 3 },
      { "id": 4, "content": "Scenic", "order": 2, "children": null, "parent": 0, "level": 1 }
    ];
 
    const SelectVehicules = document.querySelector('#vehicules');
 
 
    function AddChildrens( parent, prefix , node )
    {
      if ( Array.isArray(node) ) 
      {
        for ( subNod of node )
        {
          let child = document.createElement('OPTION');
          child.textContent    = prefix + subNod.content;
          parent.appendChild( child );
 
          AddChildrens( parent, prefix + '-' , subNod.children );
        }
      }
    }
 
    for( desc of data)
    {
      let group   = document.createElement('OPTGROUP');
      group.label = desc.content;
 
      AddChildrens( group , '-', desc.children );
 
      SelectVehicules.appendChild(  group );
    }
  </script>
</body>
</html>

Parser un json multiniveaux dans une dropdownlist.

jQuery

Vue hybride

Discussions similaires

Partager

Partager