Lister et afficher les données JSON

**pierrot10** · 29/12/2018, 10h05

Bonjour à tous,

J'ai sauvé dans une base de données des milliers d'enregistrement sur des glaciers.
Je dois maintenant les extraires et j'ai choisi AJAX. Ca semble bien marché, sauf que je n'arive pas à afficher le contenu.
Mon probleme ne doit pas être trop compliqué à résoudre, sauf que je n'ai pas la solution et pour etre plus explicite voici mon code.

Mon problème se trouve au niveau de success: function (data) (j'ajoute des commentaires en majuscule)

Code javascript :

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
 
function get_labels(para){
 
    return $.ajax({
        url: 'include/get_labels.php', 
        type: 'POST',
        data: para, 
        cache: false,
        dataType: 'json',
 
        // xhr For testing
xhr: function () {
           var xhr = $.ajaxSettings.xhr();
           xhr.onprogress = function e() {
                 // For downloads
                 if (e.lengthComputable) {
                       console.log("Download ", e.loaded / e.total);
                 }
           };
           xhr.upload.onprogress = function (e) {
                 // For uploads
                 if (e.lengthComputable) {
                       console.log("Upload: ", e.loaded / e.total);
                       //$("#loadingMoisture").show(1);
                 }
           };
        return xhr;
    },
 
    error: function (request, error) {
        console.log(request.responseText);     
    },
    success: function (data) {   
 
               if(data.length <= 0)
               {
               }
               else
              {  
                    console.log("Getting labels Successefully:",data);
 
    // ICI, DATA EST BIEN AFFICHE ET SELON LE SELECTION DES CRITERES. DONC JUSQU A LA, CA MARCHE
    // JE DOIS MAINTENANT AFFICHER CECI SUR MA PAGE WEB. DONC REMPLACER LES CELLULES (tr, td) DU TABLEAU (table) EXISTANT
    // PAR LES NOUVELLES DONNES EXTRAITES
                   //$("#loadingMoisture").hide(1);
 
 
    $('#listLables tbody tr').remove();
 
    // JE SOUHAITE ICI PARCOURIR data ET LA EST MON PROBLEME
    // data.length RETOURNE 0, ALORS QUE PLUS HAUT console.log("Getting labels Successefully:",data); M'AFFICHE BIEN DES DONNEES
 
    for(var g=0; g < data.length ; g++){
                       console.log("dd",data[g]);
                   }
 
    // CE QUI ME SURPREND, C'EST QUE PLUS HAUT, LE data.length NE M'A PAS RETORUNE 0
 
               }
        }
    });
 
}

Selon les commentaires que j'ai mis en majuscule, comment donc extraires les données stockées dans la varaiable data, pour reconstruire mon tableau?

Milles mercis pour vos lumières et bonne année!!

**Toufik83** · 29/12/2018, 14h48

Salut,
tu peux nous dire ce qui est affiché par la ligne ?

Code :

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

console.log("Getting labels Successefully:",data);

puis je pense que tu as un problème de synchronisation, tu peux utiliser les promesses.

essaie de traiter ton data dans done() et pas dans success comme suite :

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
 
 
return $.ajax({
        url: 'go.php', 
        type: 'POST',
        data: para, 
        cache: false,
        dataType: 'json',
 
        // xhr For testing
	xhr: function () {
           var xhr = $.ajaxSettings.xhr();
           xhr.onprogress = function e() {
                 // For downloads
                 if (e.lengthComputable) {
                       console.log("Download ", e.loaded / e.total);
                 }
           };
           xhr.upload.onprogress = function (e) {
                 // For uploads
                 if (e.lengthComputable) {
                       console.log("Upload: ", e.loaded / e.total);
                       //$("#loadingMoisture").show(1);
                 }
           };
		return xhr;
	},
        error: function (request, error) {
		console.log(request.responseText);     
	}
    })
	.done(function(data){//data est un objet pas un tableau, on utilise $.each pour le parcourir
		console.log('done :',data);
		$.each(data,function(k,v){//k c'est la clé, v c'est la valeur de la clé
			console.log("k :"+k,'v :'+v);
		});
 
	});

**pierrot10** · 29/12/2018, 17h52

Bonjour,

Oui voic un extrait

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
{
  "1": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "1A",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "2": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "1B",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "3": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "1C",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "4": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "2A",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "5": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "2B",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "6": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "2C",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "7": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "3A",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "8": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "3B",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  },
  "9": {
    "g_name": "GL1",
    "l_name": "UP",
    "r_name": "3C",
    "b_name": "None",
    "isOut": 0,
    "isIn": 0,
    "isAnalized": 0,
    "analized": {
      "date": "2018-12-05 14:42:54.517000",
      "timezone_type": 3,
      "timezone": "Europe/Berlin"
    },
    "comment": null,
    "created": "DateTime"
  }
}

Je vais regardé et essayer ta proposition avec done

Mercii!!

**Toufik83** · 29/12/2018, 18h22

Alors c'est comme je disais, data est un objet et pas un tableau, du coup je me demande comment se fait-il que tu reçois 0 quand tu fais data.length ?!, normalement ça doit te retourner undefined pas 0.

Les items (le k dans $.each) de l'objet data sont : 1,2,3...9, et les valeurs (le v dans $.each) sont des objets aussi, alors si tu veux récupérer par exemple la valeur de chaque r_name de l'item correspondant, il suffit de mettre v.r_name.

**pierrot10** · 29/12/2018, 18h23

Le done est une bonne solution. J'arrive faire ceci, mais j'ai le même problème au niveau suivant.
Je détaille le code pour est plus précis

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
 
.done(function(data){//data est un objet pas un tableau, on utilise $.each pour le parcourir
		console.log('done :',data);
 
		$('#listLables tbody tr').remove();
 
		$.each(data,function(k,v){//k c'est la clé, v c'est la valeur de la clé
			console.log("k :"+k,'v :'+v);
// ICI, LE tr EST BIEN AJOUTé à tbody
			$('#listLables tbody').prepend( "<tr></tr>" );
// ICI J ESSYE DE PARCOURIR LE v, MAIS ENCORE UNE FOIS, IL NE PARCOURT PAS LA BOUCLE
// JE PENSE QUE JE DEVRAIS ENCORE FAIRE AVEC UN EACH, MAIS QULLE EST LA SYNTAXE?
			for(var i=0; i < v.length; i++){
				$('#listLables tbody tr').apend( "<td>"+v[i]+"</td>" );	
			}
		});
	});

Donc au niveau du for, comment puis-je faire un each de v?

**pierrot10** · 29/12/2018, 18h24

Ha nos message se sont croisés.
Mais dans tous les cas, il faudra que je parcours v pour avoir le nombre de colonne (td)

J'i pensé faire ceci

Code :

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

$('#listLables tbody tr').append( "<td>"+v.r_name+"</td>" );

pour chaque colonne, mais ce n'est pas élégent, surtout si le nombre de colonnes devaient changer

Ceci semble est une piste même si ca ne crée pas correctement mon tableau

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
 
done(function(data){//data est un objet pas un tableau, on utilise $.each pour le parcourir
		console.log('done :',data);
 
		$('#listLables tbody tr').remove();
 
		$.each(data,function(k,v){//k c'est la clé, v c'est la valeur de la clé
			console.log("k :"+k,'v :'+v);
 
			$('#listLables tbody').append( "<tr></tr>" );
 
				$.each(v,function(kk,vv){
					$('#listLables tbody tr').append( "<td>"+vv+"</td>" );
 
				});
 
 
 
 
		});

**Toufik83** · 29/12/2018, 18h38

enlève la boucle for et écris juste ce code dans $.each

Code :

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

1
2
3
4
5
6
7
8
 
$.each(data,function(k,v){
	$('#listLables tbody')
	.prepend('<tr>'
             +'<td>'+v.g_name+'</td> <td>'+v.l_name+'</td> <td>'+v.r_name+'</td> <td>'+v.b_name+'</td>' 
             +'<td>'+v.isOut+'</td>'
         +'</tr>');
});

Lister et afficher les données JSON [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager