Affichage JSON multidimension et possibilité de cacher/montrer ?

**altair8080** · 12/05/2014, 15h42

Bonjour,

voici mon problème je souhaite afficher le contenu d'un json que je reçois par l'appel d'une page. (exemple aléatoire)

Code :

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

{"error":false,"msg":[{"id":36,"message":"contenu","author":"auteur","provider":"sms","ctime":"2014-05-11 09:01:00","visible":0},{"id":1,"message":"essai message","author":"sdgd","provider":"sms","ctime":null,"visible":null},{"id":3,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":4,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":5,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":6,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":7,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":8,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":9,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":10,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":11,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":12,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":13,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":14,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":15,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":16,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":17,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":18,"message":"msg","author":"au","provider":"sms","ctime":null,"visible":null},{"id":19,"message":"msg","author":"au","provider":"sms","ctime":null,"visible":null},{"id":20,"message":"msg","author":"au","provider":"sms","ctime":null,"visible":null},{"id":21,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":22,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":23,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":24,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":25,"message":"54","author":"54","provider":"5454","ctime":null,"visible":null},{"id":26,"message":"lkl","author":"lkl","provider":"lkl","ctime":null,"visible":null},{"id":27,"message":"kjhjkh","author":"jkhjkh","provider":"kjhjk","ctime":null,"visible":null},{"id":28,"message":"aa","author":"aa","provider":"aa","ctime":null,"visible":null},{"id":29,"message":"qs","author":"qs","provider":"sd","ctime":null,"visible":null},{"id":30,"message":"mlk","author":"sd","provider":"lklm","ctime":null,"visible":null}]}

j'ai tenté de faire afficher le contenu dans une div lors du success mais cela plante à chaque fois.
1/ comment faire sans écrire une ligne pour chaque champs car ils seront variable d'un enreg à l'autre et je ne souhaite afficher que ceux de msg.

2/ je vais mettre chaque ligne dans une div ou ul ou li. j'ai tenté un exemple avec

Code html :

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

1
2
3
4
5
 <ul id="contenu">
        <li id="t1">bonjour</li>
        <li id="t2" style="display: none;">bonjour2</li>
        <li id="t3">bonjour3</li>        
    </ul>

le second est maqué mais je souhaite rendre cela dynamique en fonction de la valeur visible.
j'ai tenté les fonction hide, show, slidedown mais cela reste toujours visible ou ne masque pas.

je pense que mes 2 demandes sont simples mais je bloque

**SpaceFrog** · 12/05/2014, 16h27

http://jsfiddle.net/mt632/3/

**altair8080** · 14/05/2014, 09h55

Bonjour et merci
mais cela ne correspond pas tout à fait voici ce que je fais mais sans résultat

index.php

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
<!DOCTYPE html>
<html lang="fr">
<head>
 
	<title>Wall</title>
 
 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 
    <script type="text/javascript">
         $(document).ready(function() {
 
        $.ajax({
            url: 'http://localhost/api/v1/msg',
            type: 'GET',
            dataType: 'json',
            contentType: "application/json",
            success: function(data){ 
 
               $.each(data.msg, function (i,key) {
 
               $("#contenu").prepend(key.message);
           }   
            //  alert(r.length);
 
 
            },
            error: function(data){
                alert("erreur:"+data.message);
            }
        });
 
      });
 
    </script>
<body>
    <div id="contenu"></div>
 
</body>
</html

le contenu du retour de l'api:

Code :

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

{"error":false,"msg":[{"id":36,"message":"contenu","author":"auteur","provider":"sms","ctime":"2014-05-11 09:01:00","visible":0},{"id":1,"message":"essai message","author":"sdgd","provider":"sms","ctime":null,"visible":null},{"id":3,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":4,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":5,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":6,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":7,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":8,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":9,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":10,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":11,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":12,"message":"ceci est un contenu","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":13,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":14,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":15,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":16,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":17,"message":"ceci","author":"moi","provider":"SMS","ctime":null,"visible":null},{"id":18,"message":"msg","author":"au","provider":"sms","ctime":null,"visible":null},{"id":19,"message":"msg","author":"au","provider":"sms","ctime":null,"visible":null},{"id":20,"message":"msg","author":"au","provider":"sms","ctime":null,"visible":null},{"id":21,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":22,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":23,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":24,"message":"jh","author":"kjlklj","provider":"jkh","ctime":null,"visible":null},{"id":25,"message":"54","author":"54","provider":"5454","ctime":null,"visible":null},{"id":26,"message":"lkl","author":"lkl","provider":"lkl","ctime":null,"visible":null},{"id":27,"message":"kjhjkh","author":"jkhjkh","provider":"kjhjk","ctime":null,"visible":null},{"id":28,"message":"aa","author":"aa","provider":"aa","ctime":null,"visible":null},{"id":29,"message":"qs","author":"qs","provider":"sd","ctime":null,"visible":null},{"id":30,"message":"mlk","author":"sd","provider":"lklm","ctime":null,"visible":null}]}

et ce que je voudrais obtenir:

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
<body>
    <div id="contenu">
  <li id="t36" class="msg">
                            <div class="tt">
                                <span class="author">Person 5 :</span>
                                <span class="textMsg">hello testing message</span> -
                                <span class="time" data-time="2014-05-08 18:02:40">il y a 5 jours</span>
                                <div style="clear: both;"></div>
                            </div>
                        </li>
                        <li id="t10" class="msg" >
                            <div class="tt">
                                <span class="author">Person 2:</span>
                                <span class="textMsg">hello testing sms by</span> -
                                <span class="time" data-time="2014-05-08 18:02:40">il y a 5 jours</span>
                                <div style="clear: both;"></div>
                            </div>
                        </li>
                        <li id="t9" class="msg">
                            <div class="tt">
                                <span class="author">Person 1 :</span>
                                <span class="textMsg">hello testing sms by </span> -
                                <span class="time" data-time="2014-05-08 18:02:40">il y a 5 jours</span>
                                <div style="clear: both;"></div>
                            </div>
                        </li>
......
</div>
</body>

**SpaceFrog** · 14/05/2014, 10h31

ha par "affichage" tu entends mise en forme avec li span et autres balises ...

il va falloir boucler sur le JSON poru créer les elements et les renseigner avec le contenu du JSON

**altair8080** · 14/05/2014, 10h38

Oui j ai essayé avec du each... mais ma syntaxe ne devaut pas etre bonne car rien du tout

**SpaceFrog** · 14/05/2014, 12h14

http://jsfiddle.net/mt632/9/

**altair8080** · 14/05/2014, 14h21

Merci ,j'ai réalisé ceci avec ton exemple mais cela ne fonctionne tjrs pas.

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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="fr">
    <head>
 
        <title>Wall</title>
 
 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
 
        <script type="text/javascript">
            $(document).ready(function() {
 
 
                datar = {
                    "error": false,
                    "msg": [
                        {
                            "id": 36,
                            "message": "contenu",
                            "author": "auteur",
                            "provider": "sms",
                            "ctime": "2014-05-11 09:01:00",
                            "visible": 0
                        }, {
                            "id": 1,
                            "message": "essai message",
                            "author": "sdgd",
                            "provider": "sms",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 3,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 4,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 5,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 6,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 7,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 8,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 9,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 10,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 11,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 12,
                            "message": "ceci est un contenu",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 13,
                            "message": "ceci",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 14,
                            "message": "ceci",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 15,
                            "message": "ceci",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 16,
                            "message": "ceci",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 17,
                            "message": "ceci",
                            "author": "moi",
                            "provider": "SMS",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 18,
                            "message": "msg",
                            "author": "au",
                            "provider": "sms",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 19,
                            "message": "msg",
                            "author": "au",
                            "provider": "sms",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 20,
                            "message": "msg",
                            "author": "au",
                            "provider": "sms",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 21,
                            "message": "jh",
                            "author": "kjlklj",
                            "provider": "jkh",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 22,
                            "message": "jh",
                            "author": "kjlklj",
                            "provider": "jkh",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 23,
                            "message": "jh",
                            "author": "kjlklj",
                            "provider": "jkh",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 24,
                            "message": "jh",
                            "author": "kjlklj",
                            "provider": "jkh",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 25,
                            "message": "54",
                            "author": "54",
                            "provider": "5454",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 26,
                            "message": "lkl",
                            "author": "lkl",
                            "provider": "lkl",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 27,
                            "message": "kjhjkh",
                            "author": "jkhjkh",
                            "provider": "kjhjk",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 28,
                            "message": "aa",
                            "author": "aa",
                            "provider": "aa",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 29,
                            "message": "qs",
                            "author": "qs",
                            "provider": "sd",
                            "ctime": null,
                            "visible": null
                        }, {
                            "id": 30,
                            "message": "mlk",
                            "author": "sd",
                            "provider": "lklm",
                            "ctime": null,
                            "visible": null
                        }]
                }
 
                $.each(datar.msg, function(idx, cnt) {
                    $contenu = $('<li/>').addClass('tt');
 
                    $contenu.append($('<div/>').addClass('author').html("Auteur: " + cnt.author));
                    $contenu.append($('<div/>').addClass('message').html("Message: " + cnt.message));
                    $contenu.append($('<div/>').addClass('provider').html("Provider: " + cnt.provider)
 
                            $('#contenu').append($contenu);
                });
            }
 
 
 
 
 
        </script>
        <style type="text/css" >
            .author { color: red;}
            .message { color: grey;}
            .provider { color: green;}
            .tt {border: solid 1px silver;}
        </style>
    </head>
    <body>
        <ul id="contenu"></ul>
 
    </body>
</html>

**SpaceFrog** · 14/05/2014, 15h34

Il manque deux ) dans ton code

**altair8080** · 14/05/2014, 15h42

merci c'est parfait, j'avais contrôlé mais je n'avais pas vu les englobants

**danielhagnoul** · 14/05/2014, 16h16

Bonjour

Édit 15 h 20 : je vois que la discussion est maintenant marquée "résolue" ! J'ai donc, probablement mal compris le besoin, mais je laisse la réponse, elle peut toujours servir pour quelqu'un d'autre.

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
/*
 * Si je comprends bien le contenu de l'array "msg" change,
 * on ne peut donc pas y accéder par le nom de la propriété.
 * Mais on peut toujours parcourir les propriétés et connaître les valeurs.
 */
 
$.each( data.msg, function( i, item ){
    $.each( item, function( j, jtem ){
        /*
         * i = index de l'array msg
         * j = le libellé de la propriété (ex: "id")
         * jtem = le contenu de cette propriété (ex: 36)
         */
        console.log( i, j, jtem );
 
        /*
         * Reste à traité le résultat en fonction de vos besoins.
         */
    });
});

**altair8080** · 14/05/2014, 16h57

Merci à vous deux je pense que j avais un pb avec une parenthèse fermante depuis le début ce qui explique que je n arrivais jamais à faire un seul cas.

Affichage JSON multidimension et possibilité de cacher/montrer ?

jQuery

Discussions similaires

Partager

Partager