Merger deux tableaux et retirer les doublons

**matyuya** · 26/04/2020, 09h43

Bonjour,

Je rencontre un problème auquel je fais face depuis plusieurs heures maintenant. Je suis bloqué.

J'ai crée une carte leaflet, les données proviennent d'un fichier geoJSON.

J'utilise le plugin markerCluster pour regrouper les marqueurs ayant les mêmes coordonées.

Les données concernent des établissements donc les marqueurs dans chaque cluster ont une majorité de données en commun : nom, adresse tel etc..

Seules quelques informations diffèrent.

Voici le code pour mes clusters :

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
var promise = $.getJSON("examen.json");
/*cluster for the first map */
var clusters = L.markerClusterGroup({
    spiderfyOnMaxZoom: false,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: true
});
/* special cluster click action with associated html. I'm targetting the markers inside the selected cluster. */
clusters.on('clusterclick', function (a) {
    if (a.layer._zoom == 18) {
        var html = '';
        for (feat in a.layer._markers) {
            if (a.layer._markers[feat].feature.properties['Professeur']) {
                html += '<p class="prof">' + a.layer._markers[feat].feature.properties['Professeur'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Professeur2']) {
                html += '<p class="prof2">' + a.layer._markers[feat].feature.properties['Professeur2'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Chu']) {
                html += '<p class="chu">' + a.layer._markers[feat].feature.properties['Chu'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Laboratoire']) {
                html += '<p class="labo">' + a.layer._markers[feat].feature.properties['Laboratoire'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Prelevement']) {
                html += '<p>' + a.layer._markers[feat].feature.properties['Prelevement'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Envoi']) {
                html += '<p>' + a.layer._markers[feat].feature.properties['Envoi'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Adresse']) {
                html += '<p class="adress">' + a.layer._markers[feat].feature.properties['Adresse'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Cp']) {
                html += '<p class="cp">' + a.layer._markers[feat].feature.properties['Cp'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Tel']) {
                html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Fax']) {
                html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Mail']) {
                html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail'] + '">' + a.layer._markers[feat].feature.properties['Mail'] + '</a></p>';
            }
            if (a.layer._markers[feat].feature.properties['Tel2']) {
                html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel2'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Fax2']) {
                html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax2'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Mail2']) {
                html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail2'] + '">' + a.layer._markers[feat].feature.properties['Mail2'] + '</a></p>';
            }
            if (a.layer._markers[feat].feature.properties['Renseignement']) {
                html += '<p class="rt">' + a.layer._markers[feat].feature.properties['Renseignement'] + '</p>';
            }
            if (a.layer._markers[feat].feature.properties['Url']) {
                html += '<p class="url"><a href="' + a.layer._markers[feat].feature.properties['Url'] + '">' + a.layer._markers[feat].feature.properties['Url'] + '</a></p>';
            }
            html += '<div class="pictos">';
            if (a.layer._markers[feat].feature.properties['Examen']) {
                html += '<span class="' + a.layer._markers[feat].feature.properties['Examen'] + '">' + a.layer._markers[feat].feature.properties['Examen'] + '</span>';
            }
            html += '</div>';
        }
        $('#layer_infos .fill').html(html);
    }
})

Je récupère toutes mes données (les "feature.properties" de mon fichier geoJSON) et je les insère une par une dans un bloc html. J'affiche ensuite ce bloc dans une div dynamique à droite de la carte.

Si j'ai par exemple 5 marqueurs dans le cluster, cela va m'afficher 5 blocs html à la suite dans ma div. Il y aura donc redondance du nom, adresse etc..

Ce que je cherche à obtenir : un seul bloc html, contenant une seule fois les infos redondantes (une seule fois le nom, l'adresse etc) et en dessous afficher dans le même bloc les infos qui changent.

La plupart du code trouvé notamment sur stackoverflow donne des pistes pour "supprimer les doublons" d'un tableau lorsque la clé est équivalente.

Moi je cherche plutôt à n'afficher qu'une fois les doublons, en me basant sur les valeurs des clés (properties.val())

Mais je bloque, et j'ai grandement besoin d'aide pour terminer ce projet !

Merci à tous ceux qui voudront bien m'aiguiller !!

**NoSmoking** · 26/04/2020, 11h12

Bonjour,
pas sûr d'avoir tout compris mais je passerais par un objet servant uniquement à l'affichage.

En gros, création de l'objet, parsage du JSON et affectation des données, si duplication mise en tableau des données différentes.

Avec un exemple du JSON, il serait peut-être plus facile de répondre.

auquel je fais face depuis plusieurs heures maintenant.

nul doute que tu rencontreras des cas où il te faudra passer plus de temps

**matyuya** · 26/04/2020, 12h24

Bonjour et merci pour la réponse.
Mon fichier geoJSON est classique je crois, comme suit :

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
{
    "type": "FeatureCollection",
    "features": [
 
        {
            "type": "Feature",
            "properties": {
                "Examen": "ccl18",
                "Prelevement": "2 tubes EDTA 4,5 ml (bouchon violet)",
                "Laboratoire": "Service d'Hématologie Biologique / Secteur de cultures",
                "Chu": "CHU Estaing",
                "Adresse": "1 place Raymond et Lucie Aubrac",
                "Cp": "63003 Clermont Ferrand Cedex 1",
                "Professeur": "Pr Berger Marc",
                "Tel": "Tel : 04 73 75 03 68",
                "Fax": "Fax : 04 73 75 06 83",
                "Mail": "mberger@chu-clermontferrand.fr",
                "Url": "http://www.cetl.net"
            },
            "geometry": {
                "type": "Point",
                 "coordinates": [3.108547, 45.7848475]
            }
        },{
            "type": "Feature",
            "properties": {
                "Examen": "chit1",
                "Prelevement": "Sang total sur EDTA (violet) 5-10 ml Envoi à température ambiante en 24 à 48 h" ,
                "Envoi": "Eviter les envois en fin de semaine. Transport rapide type Chronopost en France ou type Fedex/DXL depuis l'étranger",
                "Laboratoire": "Laboratoire de Biochimie, Métabolomique et Protéomique",
                "Chu": "Hôpital Necker",
                "Adresse": "Tour Lavoisier - 4ème Etage 149 rue de Sèvres",
                "Cp": "75015 Paris ",
                "Professeur": "Dr Caillaud Catherine",
                "Tel": "Tel : 01 71 39 69 74",
                "Fax": " Fax : 01 44 49 51 30",
                "Mail": "catherine.caillaud@inserm.fr",
                "Renseignement": "Consentement indispensable signé par le patient ou ses parents (enfant mineur). Prescription génétique avec renseignements cliniques et familiaux"
 
 
            },
            "geometry": {
                "type": "Point",
              "coordinates": [2.315493106842041, 48.84648132324219]
            }
        },

Pour l'instant, avec ca

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
	var promise = $.getJSON("examen.json");
 
		/*cluster for the first map */
		var clusters = L.markerClusterGroup({
			spiderfyOnMaxZoom: false, 
			showCoverageOnHover: false, 
			zoomToBoundsOnClick: true 
		});
 
		/* special cluster click action with associated html. I'm targetting the markers inside the selected cluster. */
		clusters.on('clusterclick', function(a){
 
		/**/
 
 
		/**/
		if(a.layer._zoom == 18){
		 var html = '';
		var gap = a.layer._markers;
		var result = [];
		for(var i in gap)
		result.push([i, gap[i]]);
 
	console.log(result);
 
 
 
 
 
 
 
 
 
		for (feat in a.layer._markers){
/**/
// generates a key from the item's coordinates.
 
 
/*
 
/**/
		if (a.layer._markers[feat].feature.properties['Professeur']) {
			html += '<p class="prof">' + a.layer._markers[feat].feature.properties['Professeur'] + '</p>';
		}
		 if (a.layer._markers[feat].feature.properties['Professeur2']) {
			html += '<p class="prof2">' + a.layer._markers[feat].feature.properties['Professeur2'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Chu']) {
			html += '<p class="chu">' + a.layer._markers[feat].feature.properties['Chu'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Laboratoire']) {
			html += '<p class="labo">' + a.layer._markers[feat].feature.properties['Laboratoire'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Prelevement']) {
			html += '<p>' + a.layer._markers[feat].feature.properties['Prelevement'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Envoi']) {
			html += '<p>' + a.layer._markers[feat].feature.properties['Envoi'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Adresse']) {
			html += '<p class="adress">' + a.layer._markers[feat].feature.properties['Adresse'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Cp']) {
			html += '<p class="cp">' + a.layer._markers[feat].feature.properties['Cp'] + '</p>';
		}
 
		if (a.layer._markers[feat].feature.properties['Tel']) {
			html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Fax']) {
			html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Mail']) {
			html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail'] +'">' + a.layer._markers[feat].feature.properties['Mail'] + '</a></p>';
		}
		if (a.layer._markers[feat].feature.properties['Tel2']) {
			html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel2'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Fax2']) {
			html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax2'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Mail2']) {
			html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail2'] +'">' + a.layer._markers[feat].feature.properties['Mail2'] + '</a></p>';
		}
		if (a.layer._markers[feat].feature.properties['Renseignement']) {
			html += '<p class="rt">' + a.layer._markers[feat].feature.properties['Renseignement'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Url']) {
			html += '<p class="url"><a href="' + a.layer._markers[feat].feature.properties['Url'] + '">' + a.layer._markers[feat].feature.properties['Url'] + '</a></p>';
		}
		html+='<div class="pictos">';
		if (a.layer._markers[feat].feature.properties['Examen']) {
			html += '<span class="' + a.layer._markers[feat].feature.properties['Examen'] + '">' + a.layer._markers[feat].feature.properties['Examen'] + '</span>';
		}
 
			html+='</div>';
		}
 
		$('#layer_infos .fill').html(html);
		}
		})

J'affiche en console deux tableaux contenant toutes mes "properties", avec tous les doublons..
A partir de là, impossible d'aller plus loin, c'est à dire, "merger" les deux (ou plus) tableaux (qui correspondent aux marqueurs de mon cluster), supprimer les doublons, et n'afficher qu'un seul bloc html (provenant d'un seul tableau) contenant ces données.
Vu mon faible niveau en js, je cherche la bonne syntaxe pour parvenir au résultat escompté. Je ne sais pas comment faire et ai grand besoin d'aide..

Nom : 17EZY.png
Affichages : 78
Taille : 57,5 Ko

Nom : 17EZY.png
Affichages : 78
Taille : 57,5 Ko

**matyuya** · 27/04/2020, 09h23

Bonjour

J'ai posé sensiblement la même question il y a quelques jours, mais je la reformule en espérant être plus précis. Je suis totalement bloqué, et ai grand besoin d'aide.

Voici ma configuration :

Utilisation de leaflet pour afficher une carte
Utilisation de clustermaker js pour regrouper les marqueurs en cluster
Utilisation d'un fichier geoJSON pour toutes les données
Système de filtre par checkbox à gauche ,pour afficher les marqueurs
Carte affichée au milieu
Et une div dynamique à droite pour afficher les infos (récupérées du fichier geoJSON), dès qu'on clique sur un marqueur.

J'ai réussi à faire en sorte qu'au clic sur le cluster, les informations des marqueurs correspondants s'affichent dans ma div dynamique;
Si j'ai deux marqueurs dans mon cluster, j'ai donc deux blocs html à la suite qui s'affichent.

Mon problème :

Chaque bloc html contient des informations redondantes que je souhaite supprimer. Vu qu'ils sont aux mêmes coordonnées, j'ai donc le même nom d'établissement, même adresse, même téléphone etc. Seules quelques informations spécifiques changent.
J'aimerai avoir une seule fois le nom d'établissement, une seule fois le tel etc et à la suite toutes les infos spécifiques. Je cherche donc une fonction dynamique qui me rassemble toutes mes données et en supprime les doublons

Ca c'est donc mon code qui me permet d'afficher tout mon bloc html lorsque je clique sur le cluster. C'est une boucle, donc ca me ramène plusieurs fois le bloc html.

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
var promise = $.getJSON("examen.json");
 
		/*cluster for the first map */
		var clusters = L.markerClusterGroup({
			spiderfyOnMaxZoom: false, 
			showCoverageOnHover: false, 
			zoomToBoundsOnClick: true 
		});
 
		/* special cluster click action with associated html. I'm targetting the markers inside the selected cluster. */
		clusters.on('clusterclick', function(a){
 
		/**/
 
 
 
		if(a.layer._zoom == 18){
		 var html = '';
 
 
 
		for (feat in a.layer._markers){
 
		/**/		
		var gap = a.layer._markers[feat].feature;
		var nb = [] ;
		for(var i in gap.properties) {
			nb.push([i, gap.properties[i]]);
			/*
		if( !nb.includes( i ) ) {
			nb.push( i ) ;
		}
 
		if( !nb.includes( gap.properties[ i ] ) ) { 
			nb.push( gap.properties[ i ] ) ;
			}
			*/
		}
 
 
	/**/
 
		if (a.layer._markers[feat].feature.properties['Professeur']) {
 
			html += '<p class="prof">' + a.layer._markers[feat].feature.properties['Professeur'] + '</p>';
		}
		 if (a.layer._markers[feat].feature.properties['Professeur2']) {
			html += '<p class="prof2">' + a.layer._markers[feat].feature.properties['Professeur2'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Chu']){
 
			html += '<p class="chu">' + a.layer._markers[feat].feature.properties['Chu'] + '</p>';
		} 
		if (a.layer._markers[feat].feature.properties['Laboratoire']) {
			html += '<p class="labo">' + a.layer._markers[feat].feature.properties['Laboratoire'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Prelevement']) {
			html += '<p>' + a.layer._markers[feat].feature.properties['Prelevement'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Envoi']) {
			html += '<p>' + a.layer._markers[feat].feature.properties['Envoi'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Adresse']) {
			html += '<p class="adress">' + a.layer._markers[feat].feature.properties['Adresse'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Cp']) {
			html += '<p class="cp">' + a.layer._markers[feat].feature.properties['Cp'] + '</p>';
		}
 
		if (a.layer._markers[feat].feature.properties['Tel']) {
			html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Fax']) {
			html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Mail']) {
			html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail'] +'">' + a.layer._markers[feat].feature.properties['Mail'] + '</a></p>';
		}
		if (a.layer._markers[feat].feature.properties['Tel2']) {
			html += '<p class="tel">' + a.layer._markers[feat].feature.properties['Tel2'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Fax2']) {
			html += '<p class="fax">' + a.layer._markers[feat].feature.properties['Fax2'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Mail2']) {
			html += '<p class="mail"><a href="mailto:' + a.layer._markers[feat].feature.properties['Mail2'] +'">' + a.layer._markers[feat].feature.properties['Mail2'] + '</a></p>';
		}
		if (a.layer._markers[feat].feature.properties['Renseignement']) {
			html += '<p class="rt">' + a.layer._markers[feat].feature.properties['Renseignement'] + '</p>';
		}
		if (a.layer._markers[feat].feature.properties['Url']) {
			html += '<p class="url"><a href="' + a.layer._markers[feat].feature.properties['Url'] + '">' + a.layer._markers[feat].feature.properties['Url'] + '</a></p>';
		}
		html+='<div class="pictos">';
		if (a.layer._markers[feat].feature.properties['Examen']) {
			html += '<span class="' + a.layer._markers[feat].feature.properties['Examen'] + '">' + a.layer._markers[feat].feature.properties['Examen'] + '</span>';
		}
 
			html+='</div>';
		}
 
		$('#layer_infos .fill').html(html);
		}
		})

Cela m'affiche ceci en console:
Nom : 15879248821216_arrays.PNG
Affichages : 74
Taille : 56,0 Ko

J'ai donc de 2 à++ tableaux contenant des infos redondantes .

Comment puis je faire pour que ma boucle n'affiche qu'un seul bloc html et sans doublons ?

Je cherche désespérément de l'aide avec si possible des exemples de code car j'y suis depuis deux jours, je n'y arrive pas..je m'arrache les cheveux.

Merci pour votre aide !

**psychadelic** · 27/04/2020, 15h01

Je veux bien essayer d'aider mais pour moi faut pauser la question de manière très précise.

exemple:

j'ai donc le même nom d'établissement, même adresse, même téléphone etc. Seules quelques informations spécifiques changent.

il n'y a pas de nom d'établissement dans le JSON. j'imagine qu'il faut comprendre features[x].properties.Laboratoire à la place

qu'est-ce que tu considère comme un doublon uniquement les propriétés Laboratoire, Chu, Adresse, Cp, Tel, Fax, Url ?

et que fait t'on des propriétés Examen, Prelevement, Professeur, Mail ? on les supprime ?
ou faut t'il m=les agglomérer dans un sous tableau ?

est-ce qu'il peur exister d'autres propriétés à prendre en compte ou à supprimer ?

Est-ce que les 2 tableaux à fusionner ont bien la même structure ?

Merger deux tableaux et retirer les doublons

JavaScript

Discussions similaires

Partager

Partager