Affichage JSON multidimension et possibilité de cacher/montrer ?

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

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, 15h27

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

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

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, 09h31

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