Tableau d'objets qui change d'order

Version imprimable

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:

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 !

28/04/2020, 16h28
NoSmoking
Bonjour,
Code:

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:

console.log(JSON.stringify(coords));
28/04/2020, 16h54
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

1 pièce(s) jointe(s)

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:

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 :
Pièce jointe 561154

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?

28/04/2020, 19h05
NoSmoking

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

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 ?
28/04/2020, 21h43
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.

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:

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:

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];
                     }
                 });
           });