Discussion :

[brd3n]

Yo !
J'espère tout d'abord que vous allez bien !
Mon problème est simple je remplis mon tableau, je fais un console.log dans la boucle, le tableau a les valeurs correspondantes mais lorsque je fais un console.log 2 lignes plus bas de manière aléatoire celui n'a pas le même ordre.
J'ai déjà essayé pas mal de trick, tel que le .sort(), mais rien n'y fait, autant sur 100 refresh l'ordre est correct mais de manière aléatoire celui ci par moment change d'ordre.

Je suis sous Laravel, requete ajax, api Mapbox.

Le code sera plus explicite..

Le JS

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
 
 $.each(data.intervention,(index,inter)=> {
            console.log(inter);
            let eventColor = getColorPlanning(inter.status);
          	coordsIntervention.push({
          		nom :inter.login,
          		coordonnee:inter.adresse_site+", "+inter.cp_site+" "+inter.ville_site,
          		nom_site:inter.adresse_site+", "+inter.cp_site+" "+inter.ville_site,
          		date:inter.planning_date_begin
          		});
 
              events.push({
                id:inter.id,
                title: inter.site+'\n'+inter.adresse_site+'\n'+inter.cp_site+' '+inter.ville_site,
                start: inter.planning_date_begin, 
                end: inter.end,
                backgroundColor: eventColor,
                resourceId: inter.login,
              });
 
          });
 
coordsIntervention.forEach(function(v) {
	$.ajax({
		method:"get",
		url : `https://api.mapbox.com/geocoding/v5/mapbox.places/${v.coordonnee}.json?country=FR&access_token=xxxxxxxxxxxxxxxxxxxxxxxxxxx`,
		success:(data)=>{
                let date = v.date.split('T');
                console.log('date ' + date[1]);
		coord= {nom: v.nom, coordonnee: [data.features[0].center[0],data.features[0].center[1]],nom_site: v.nom_site,date:date[1]};
                coords.push(coord);
 
		   }
               });
 
      /*là j'ai le bon ordre */
      console.log('test coord : ' +coords)
      console.log(v.coordonnee+" le "+v.date);   
 
});
 
/*ici de manière aléatoire l'ordre change..*/
console.log(coords);

Je tiens à préciser que lors la récup de mon json via le controller je recup bien les données par ->orderBy('planning_date_begin','asc') j'ai mis asc même si c'est natif


Toute réponse est la bienvenue !
Par avance merci de m'aiguiller !

[NoSmoking]

Bonjour,

Code :

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

1
2
/*ici de manière aléatoire l'ordre change..*/
console.log(coords);

ce code est en dehors de ta boucle coordsIntervention.forEach qui fait appel à une fonction asynchrone, le résultat n'est pas immédiatement disponible et comme tu affiche unArray la console le met à jour.

Pour pallier à ce dernier point il te faut, par exemple, faire un

Code :

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

console.log(JSON.stringify(coords));

[brd3n]

Merci de ton retour NoSmoking, et tu as raison fumer c'est mal, je suis en train de m'arrêter et c'est pas facil..
Breff..
Je me suis très certainement mal exprimé.

Je me sers de cet objet lors de l'utilisation de fullcalendar, pour afficher un tracé d'interventions.
En effet, pour chaque journée, chaque technicien voit apparaitre son calendrier, avec toutes ses interventions.
Je calcul le trajet global de ces inter et ensuite sur le clic d'un bouton je fais apparaitre une popup avec le tracé de la map avec toutes ses interventions classé par date évidemment (asc).

Le problème c'est que, comme mentionné dans mon précédent message, cet objet me donne parfois un mauvais order. Par exemple l'inter qui doit être en dernier se retrouve en premier...Ce qui fausse totalement le mapping.

Comment contourner ce problème ?
J'ai du mal à comprendre pourquoi l'ordre de mon tableau est parfois aléatoire..
Une raison particulière?
Si tu as besoin de voir plus de code je peux tout te montrer tu y verras peut être quelque chose que j'ai oublié..

/*ADD*/
AH.., ton message a fait echo lol, je test un truc et je reviens vous dire si c'est ok, merci de ta réponse en tout cas

[brd3n]

Toujours le même problème..

Dans cette fonction coords doit avoir le même ordre qu'à l'intérieur de ma boucle..hors ça reste aléatoire..

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
 
function calcKm(){
	/*coords.sort(function (a, b) {
		   return a.date - b.date;
		});
  console.log(coords);*/
 
  $.each(coordInt,function(index,intervenant){
    let adresse = "";
    $.each(coords,function(index,inter){
 
      if(intervenant.nom === inter.nom){
        if(adresse === ""){
          adresse =intervenant.coordonnee;
          gps[intervenant.nom] = intervenant.coordonnee;
          tabAdresse[intervenant.nom] = "Adresse technicien";
        }
        gps[inter.nom] += ";"+inter.coordonnee;    
        tabAdresse[intervenant.nom] += ";"+inter.nom_site    
      }
 
    });
    if(adresse !== "")
      gps[intervenant.nom] += ";"+adresse;
    tabAdresse[intervenant.nom] += ";Adresse technicien";
  });
  afficheKm();
}

là c'est l'exemple parfait :


La liste des inter dans le planning n'a pas le même ordre que dans le modalmap. Erreur causée par mon tableau coords.
Une idée?

[NoSmoking]

J'ai du mal à comprendre et je sens que je vais avoir du mal à m'expliquer

Pourquoi autant de requête, pourquoi chaque intervention ne possède pas son numéro d'ordre ce qui te permettrais de ne pas faire un push dans un tableau mais un accès direct à un indice de celui-ci.

Quant est-ce que tu considères que toutes tes données sont disponibles ?

[brd3n]

Merci de ton retour et je vois très bien ce que tu veux dire.
J'y avais pensé mais j'avais la flemme de modifier le code. Je suis un peu las de cette partie et je ne comprends pas pourquoi mon objet se met à jour de manière aléatoire même avec un .sort().
Je reviendrai poster la solution.

[brd3n]

Le problème vient principalement de chrome et opéra.
Pour faire court leur interprétation du sorting d'un objet json via une requete asynchrone est quelque peu différente des autres navigateurs.

J'ai donc remplacé ça

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
coordsIntervention.forEach(function(v) {
	$.ajax({
		method:"get",
		url : `https://api.mapbox.com/geocoding/v5/mapbox.places/${v.coordonnee}.json?country=FR&access_token=u_u`,
		success:(data)=>{
                     coord = {nom: v.nom, coordonnee: [data.features[0].center[0],data.features[0].center[1]],nom_site: v.nom_site,date:v.date, id:v.id};
                     coords[coords.length] = coord;
                     }
		});
	});

Par ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 Object.keys(coordsIntervention).forEach(key => {
        $.ajax({
               method:"get",
               url : `https://api.mapbox.com/geocoding/v5/mapbox.places/${coordsIntervention[key].coordonnee}.json?country=FR&access_token=u_u.`,
               success:(data)=>{
                      coord[key] = {nom: coordsIntervention[key].nom, coordonnee: [data.features[0].center[0],data.features[0].center[1]],nom_site: coordsIntervention[key].nom_site};
                      coords[key] = coord[key];
                     }
                 });
           });