Discussion :

[nerack]

Bonjour.

Je sollicite une aide pour un problème de boucle à l'intérieur d'un plugin que je suis en train d'écrire, ce n'est pas le premier mais en récupérant du json si. Avec xml, pas de soucis mais la même requête avec un ou plusieurs json les boucles ne passent pas en dehors du done avec data. Je précise que les json sont valides, validés encore hier soir et encodés en utf-8 sans bom. Version de jQuery : 3.1.1.

Donc, la première partie qui récupère le json :

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
 
var Tableau = [];
 
function Charge() {
    $.getJSON(Opts.CheminJson)
        .done(function (data) {
			$.each(data, function (Donnees) {
			//console.log('Boucle charge - Chemin ' + Donnees.Chemin);
            Tableau.push(Donnees.Chemin);
           })
        })
        .fail(function () {
            console.log('Impossible d\'ouvrir le fichier ' + Chemin);
        })
 
        //$.each(Tableau, function (Index, Fichier) { console.log(Fichier); });
};

Je boucle donc sur data pour ne récupérer que ce qui m'intéresse pour l'instant.

Les consoles log et table affichent bien les données du tableau. sauf le each jQuery commenté. Même à l'intérieur de la fonction le tableau n'affiche rien. J'ai testé en natif(forEach) ou jQuery, nada, rien ne sort. La fonction qui se charge de boucler le tableau(Chaines de caractères simples) :

Code :

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

1
2
3
4
5
6
7
8
 
function LitTableau() {
    //console.table(Tableau);
    for (let index = 0; index < Tableau.length; index++) {
        console.log(Tableau[index]);
    }
    //$.each(Tableau, function (Index, Val) { console.log(Val); });
};

Idem, rien ne s'affiche. Je ne comprend pas pourquoi je ne peux boucler sur ce tableau, utiliser les données qu'il contient malgré aucunes erreurs de debug(outils Firefox, Vivaldi et vscode). Si un spécialiste a une idée, elle est la bienvenue. il y a forcement une subtilité mais laquelle...

[bonjourajax]

Bonjour,
le json se lit de cette facon :

Code javascript :

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

1
2
3
4
5
 
.done(function (data) {
 
			console.log(data.Chemin);
           });

[nerack]

Merci pour la réponse mais çà ne correspond pas à ma problématique. Ce code retourne un undefined sans boucle. Mon soucis se trouve dans le tableau généré. une copie écran de la console Firefox.

[bonjourajax]

que te donne ceci

Code javascript :

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

1
2
3
4
5
 
.done(function(data) {
console.log(JSON.stringify(data))
 
})

Comment est constitué le json

[nerack]

Bonsoir.

Une chaîne correspondant au fichier json. A la virgule prés. Les json correspondent à ceci.

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
 
[{
    "Noms": "Acoustique_89_bpm.mp4",
    "Chemin": "C:\\wamp64\\www\\Programmes\\Videos\\Acoustique_89_bpm.mp4",
    "Ecriture": "14/05/2016 00:11:36",
    "Creation": "22/04/2018 22:27:23",
    "Acces": "22/04/2018 22:27:23",
    "Extension": ".mp4",
    "Poids": "8,128 Mo"
  },
  {
    "Noms": "Acoustique_89_bpm.ogv",
    "Chemin": "C:\\wamp64\\www\\Programmes\\Videos\\Acoustique_89_bpm.ogv",
    "Ecriture": "22/04/2018 15:22:23",
    "Creation": "22/04/2018 22:27:23",
    "Acces": "22/04/2018 22:27:23",
    "Extension": ".ogv",
    "Poids": "17,767 Mo"
  },
  {
    "Noms": "Acoustique_89_bpm.webm",
    "Chemin": "C:\\wamp64\\www\\Programmes\\Videos\\Acoustique_89_bpm.webm",
    "Ecriture": "22/04/2018 15:38:18",
    "Creation": "22/04/2018 22:27:25",
    "Acces": "22/04/2018 22:27:25",
    "Extension": ".webm",
    "Poids": "9,988 Mo"
  }]

Pour le chemin qu'il soit absolu ou relatif c'est pareil.

[nerack]

Par contre, parseJSON me retourne une erreur : Uncaught SyntaxError: Unexpected token o in JSON at position 1

Avec ce code

Code :

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

1
2
3
4
5
 
.done(function (data) {
     var obj = $.parseJSON(data);
     console.log((obj.Chemin));
})

Ils sont validés ici : https://jsonlint.com

Je vais demander à big brother

Erreur normale donc. Je ne dois pas utiliser de parsing sur le data car le parsing est déjà fait.

[bonjourajax]

Oui le json est deja parsé avec getJSON

Code javascript :

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

1
2
3
4
5
 
.done(function(data) {
$.each(data, function (a, j) {
   console.log(j.Noms+j.Chemin+'la suite')
});

[nerack]

Merci pour le temps que tu as passé mais j'ai résolu et compris bien des choses sur les données json que j'utilise peu, je préfère le xml, à force de chercher et de tester(une semaine quand même.. Pour moi qui parse des données tout le temps.. Bordel! J'étais près à revenir au xml. Mais bon, avec du javascript le json est plus indiqué.). Finalement j'ai résolu avec une promesse et la syntaxe tableau pure, pas de point. Il est possible de passer un ou plusieurs json et çà roule. Si çà peut aider quelqu'un :

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
 
        var Promises = [];
 
        function ChargeJson(Chemin) {
	    return new Promise(function (resolve, reject) {
            $.getJSON(Chemin)
            .done(function (data) {
                resolve(data);
            })
            .fail(function () {
                reject(Error('Impossible d\'ouvrir le fichier ' + Chemin));
            })
            });
    	}
 
        function Videos(Donnees) {
	        var Texte = '';
        	Donnees.forEach(function (Items, Index) {
                Texte += '<ul>';
                $.each(Items, function (Ind, Video) {
                	Texte += '<li><a href="' + Video["Chemin"] + '">' + Video["Noms"] + '</a></li>';
            	});
            	Texte += '</ul>';
			});
			$('#PlaylistesId').append(Texte);
    	}
 
        Promises.push(ChargeJson(Opts.CheminJson));
 
    	Promise.all(Promises).then(Videos).catch(function (error) {
        	console.log(error);
        	console.error('Le fichier n\'a pas pu être lu !');
    	});

Pour plusieurs fichiers il faut adapter en passant une chaine de plusieurs fichiers et en la splittant ou directement un tableau de fichier. Ce qui diffère de ce que l'on voit partout c'est la syntaxe tableau, qui elle fonctionne, pour mon cas en tout cas. Bon, il me reste à comprendre pourquoi ce qui semble fonctionner pour la majorité ne fonctionne pas ici mais je vais pouvoir continuer ce projet.

merci encore Bonjourajax.

[bonjourajax]

De rien nerack
C'est bon si t'as trouvé alors ^^

[nerack]

Salut

en fait, j'ai résolu avec une autre solution qui est différente tout en étant identique Mais dans les faits, non ce que je souhaitais, utiliser les données du tableau(une partie des données json), n'est pas résolu. Je me suis d'ailleurs fait rappeler à l'ordre par un modo pour ne pas cliqué avoir "résolu" (Ils ne rigole pas, je suis maintenant siglé délinquant notoire.. Premier message premier cercueil, je n'avais pas fait mieux depuis mon adolescence ). Je cherche encore à comprendre cette curiosité qui passe avec une promesse mais pas sans alors que c'est le même procédé.

[bonjourajax]

Bonsoir,
il te manque quoi a résoudre je n'ai pas bien compris tu ne peux pas lire tout le json?

[nerack]

Bonsoir Bonjourajax

<<il te manque quoi a résoudre

C'est la dernère phrase :

<<Je cherche encore à comprendre cette curiosité qui passe avec une promesse mais pas sans alors que c'est le même procédé.

Le json je le lit depuis toujours. Ce n'est pas le problème. Pourquoi je ne peux pas lire le tableau généré, c'est çà le soucis.

[NoSmoking]

Bonjour,

Je cherche encore à comprendre cette curiosité qui passe avec une promesse mais pas sans alors que c'est le même procédé.

c'est un problème lié à la nature asynchrone d'une requête Ajax, cela se résume par le fait que tu n'utilises pas dans ton premier code les données au moment où elles sont disponibles.

Prenons un exemple proche de ton code en ajoutant des points de vue

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function getData( url) {
  console.log( "getData : on entre dans la fonction");
  $.getJSON( url)
    .done(function (data) {
      console.log( "getData : les données sont disponibles : ", data);
      callback( data);
    })
    .fail(function ( data) {
      console.log( "getData : une erreur est survenue : ", data);
    })
  console.log( "getData : on sort de la fonction");
};

on pourra voir dans la console la séquence suivante

getData : on entre dans la fonction
getData : on sort de la fonction
getData : les données sont disponibles : Array [ {…}, {…}, {…} ]

Le code que tu as placé avant la fin de ta fonction, $.each(Tableau, function (Index, Fichier) { console.log(Fichier); }), sera donc effectué avant que les données en retour ne soient disponibles et donc lues.

Il te faut faire la lecture et l'utilisation des données dans la partie done de l'objet jqXHR.

Si l'on reprend la fonction ci-dessus cela pourrait donner

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function getData( url, callback) {
  console.log( "getData : on entre dans la fonction");
  $.getJSON( url)
    .done(function (data) {
      console.log( "getData : les données sont disponibles : ", data);
      // appel fonction de traitement
      callback( data);
    })
    .fail(function ( data) {
      console.log( "getData : une erreur est survenue : ", data);
    })
  console.log( "getData : on sort de la fonction");
};

un paramètre a été ajouté, callback, il s'agit de la fonction appelée lorsque les données seront disponibles si il n'y a pas d'erreur.

La fonction pourrait donc ressembler à

Code :

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

1
2
3
4
5
function showData( data){
  $.each( data, function (ind, val){
    console.log( "data #", ind , " : ", val);
   });
}

avec un appel à ta fonction getData du style de

Code :

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

1
2
3
$(".cde").on("click", function(){
  getData("url-recup-data", showData);
});

A voir : Comprendre les mécanismes d'AJAX