Filtre sur un tableau

**sylvain257** · 06/11/2024, 18h00

Bonjour,

J'ai ce 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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
[{
            "id": 1,
            "parcelles": [
                "BE0152",
                "AO0559",
                "AO0560"
            ]
        },
        {
            "id": 2,
            "parcelles": [
                "AP0055"
            ]
        },
        {
            "id": 3,
            "parcelles": [
                "BE0208",
                "BE0290",
                "BE0309"
            ]
        },
        {
            "id": 4,
            "parcelles": [
                "BE0152",
                "BE0151"
            ]
        }
]

La question que je veux poser � ce JSON est de me redescendre tous les enregistrements dont l'array parcelles contient une certaine valeur.
Par exemple, tous les enregistrements dont l'array parcelles contient la valeur "BE0152".

Comment faire ? J'ai d�j� ce code que j'ai trouv� sur un forum. La fonction filter demande un filtre (qui est un json) en param�tre, l'id�e est d'adapter ce code pour prendre en compte la fameuse demande ci-dessus.

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
 
      async filter(filtre){
 
    this.filterByInsee(this.insee).then((res) => {
      var records = res.records;
 
			records = records.filter((item) => {
        for (var key in filtre) {
          if (item[key] === undefined || item[key] != filtre[key]){
            return false;
          }
          return true;
        }
      })
 
      console.log(records);
    })
   }

Merci pour vos retours

Sylvain

**Beginner.** · 07/11/2024, 00h43

Salut,

Je te propose ce petit code :

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
var json =
    [
        {
            "id": 1,
            "parcelles": [
                "BE0152",
                "AO0559",
                "AO0560"
            ]
        },
        {
            "id": 2,
            "parcelles": [
                "AP0055"
            ]
        },
        {
            "id": 3,
            "parcelles": [
                "BE0208",
                "BE0290",
                "BE0309"
            ]
        },
        {
            "id": 4,
            "parcelles": [
                "BE0152",
                "BE0151"
            ]
        }
    ]
 
 
 
 
function filter(json, valeur) {
    var list = []
    for (var obj of json) {
        if (obj.parcelles.includes(valeur)){
            list.push(obj)
            console.log(obj);        }
    }
    return list
}
 
// Exemples :
 
var res = filter(json, "BE0152")
console.log("résultat(s) -->", res);
 
 res = filter(json, "BE0151")
console.log("résultat(s) -->", res);
 
res = filter(json, "BE0208")
console.log("résultat(s) -->", res);

Une autre solution avec la m�thode filter :

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
function filter2(json, valeur) {
    return json.filter((obj => {
        if (obj.parcelles.includes(valeur)) {
            console.log(obj);
            return true
        }
    }))
}
 
// Exemples :
 
var res = filter2(json, "BE0152")
console.log("résultat(s) -->", res);
 
res = filter2(json, "BE0151")
console.log("résultat(s) -->", res);
 
res = filter2(json, "BE0208")
console.log("résultat(s) -->", res);

**sylvain257** · 07/11/2024, 11h13

Merci pour ton retour :-)

Comment ferais tu si tu devais croiser une demande pour redescendre tous les enregistrements dont l'array parcelles contient "BE0152" et "BE0153" ainsi que l'id = 3 ?
Cette requ�te ne redescendrait rien mais juste pour le principe.

Mon filtre doit se pr�senter comme :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
var filter = {
"id" : 3,
"parcelles" : ["BE0153", "BE0152"]
}

Sylvain

**Beginner.** · 07/11/2024, 14h51

Salut,

Envoy� par sylvain257

Comment ferais tu si tu devais croiser une demande pour redescendre tous les enregistrements dont l'array parcelles contient "BE0152" et "BE0153" ainsi que l'id = 3 ?

Cela d�pend, si l'id est unique je chercherais d'abord cela et alors si je trouve l'objet en question eh bien je v�rifierais si parcelles contient "BE0152" et "BE0153"...

D'ailleurs on peut m�me donner une liste contenant toutes les valeurs � chercher, exemple : var valeurs = ["BE0152", "BE0153"]...

Avant de le faire il faudrait donc nous dire si l'id est unique ou non...

**sylvain257** · 07/11/2024, 15h28

Oui l'id est unique.

C'est pour une application de visualisation des donn�es du cadastre.

J'ai une liste de propri�taires, qui poss�dent une ou plusieurs parcelles.

Quand je clique sur une parcelle, je souhaite avoir tous les propri�taires de cette parcelle. Je peux le faire c�t� serveur avec mon API mais j'aimerais le faire c�t� client, pour �viter de tirer sur le serveur d'une part, et surtout de r�utiliser ce filtre pour une recherche multicrit�res.

MAJ :
Ce code semble fonctionner. Qu'en pensez-vous ?

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
var recs = res.records;
 
      recs = recs.filter(item => {
        for(var key in filtre){
          if(key === "parcelles"){
            if(filtre[key].find((elmt) => item[key].includes(elmt))){
              return true;
            } else {
            	return false;
            }
          }
          if(item[key] === "undefined" || item[key] != filtre[key]){
          	return false
          }
        }
        return true;
      })
      console.log(recs);

**Beginner.** · 07/11/2024, 19h48

Envoy� par sylvain257

MAJ :
Ce code semble fonctionner. Qu'en pensez-vous ?

Ben l'as-tu test� ? �a donne quoi de ton cot� ?

De notre cot�, il est plus difficile de faire le teste car tu ne nous donnes pas un exemple fonctionnel... Il nous faut deviner ce que tu as voulu faire et ensuite ajouter ce qui manque pour pouvoir tester, ce n'est pas forc�ment �vident, tu ne nous facilites pas la t�che...

Dans ton code :

- recs semble �tre le tableau json que tu as donn� dans ton premier fil.

mais le probl�me c'est que cela ne colle pas avec la suite...

On ne sait pas ce qu'est la variable filtre :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
recs = recs.filter(item => {
        for(var key in filtre){
          if(key === "parcelles"){

On peut deviner que cela devrait �tre un �l�ment du tableau recs (qui contient des objets ayant une cl� parcelles...
mais dans ce cas il fallait plut�t �crire for(var key in item)...

En plus utiliser la m�thode filter fait parcourir tout le tableau alors qu'on devrait s�arr�ter d�s qu'on trouve l'objet ayant l'ID voulu...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
recs = recs.filter(item => {
        for(var key in filtre){
          if(key === "parcelles"){
            if(filtre[key].find((elmt) => item[key].includes(elmt))){
              return true;
            }

Je ne comprends pas la condition if � la ligne 4... filtre[key] et item[key] renvoient tous les deux au tableau parcelles ?

Peut-�tre que pour toi (dans ton esprit) il y a deux tableaux parselles ? Un qui est une propri�t� des objets ( item[key]) et l'autre qui est la liste des "parselles" (filtre[key]) dont on veut tester la pr�sence dans la passerelle item[key]?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

if(item[key] === "undefined" || item[key] != filtre[key]){

L� aussi j'ai du mal � comprendre :

item[key] ne devrait jamais �tre ind�fini du moins si tu avais �crit for(var key in item) au lieu de for(var key in filtre)...

**********************

Si cela t�int�resse j'avais �crit ceci entre temps :

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
 
 
var json =
    [
        {
            "id": 1,
            "parcelles": [
                "BE0152",
                "AO0559",
                "AO0560"
            ]
        },
        {
            "id": 2,
            "parcelles": [
                "AP0055"
            ]
        },
        {
            "id": 3,
            "parcelles": [
                "BE0208",
                "BE0290",
                "BE0309"
            ]
        },
        {
            "id": 4,
            "parcelles": [
                "BE0152",
                "BE0151"
            ]
        }
    ]
 
 
function is_all_items_in_parcelles(parcelles, items) {
    for (let item of items) {
        if (!parcelles.includes(item)) {
            console.warn(`item: ${item} non trouvé dans [${parcelles}]`);
            return false
        }
        console.log(`item: ${item} trouvé dans [${parcelles}]`);
    }
    return true
}
 
function filter1(json, id, valeurs) {
    for (var obj of json) {
        if (obj.id == id) {
            // console.log(`un objet d'ID ${id} a été trouvé :`, obj);
            if (is_all_items_in_parcelles(obj.parcelles, valeurs))
                return obj
            else return false
        }
    }
}
 
// Exemples :
 
console.log("************* exemple 1 *************");
var valeurs = ["BE0152", "BE0153"]
var id = 3
 
var res = filter1(json, id, valeurs)
if (res) console.log("l'objet trouvé est", res);
else console.log("Aucun objet trouvé");
 
// ------------------
console.log("************* exemple 2 *************");
 
valeurs = ["BE0208", "BE0290", "BE0309"]
id = 3
 
res = filter1(json, id, valeurs)
if (res) console.log("l'objet trouvé est", res);
else console.log("Aucun objet trouvé");
 
// ------------------
console.log("************* exemple 3 *************");
valeurs = ["BE0151", "BE0152", "BE0309"]
id = 4
 
res = filter1(json, id, valeurs)
if (res) console.log("l'objet trouvé est", res);
else console.log("Aucun objet trouvé");

Ce code est testable directement, il y a des affichages avec la console qui permettent de bien suivre le d�roulement de l�ex�cution...
On pourrait faire un code plus concis sans ces console et avec la m�thode find � la place de la fonction is_all_items_in_parcelles...

**Beginner.** · 07/11/2024, 22h53

Je crois avoir mieux compris ce que tu voulais faire, je pense que tu voulais que le filtre soit donn� sous la forme d'un objet ayant une propri�t� "parcelles", du coup il faudrait que filtre soit par exemple comme en �a :

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
var filtre = {    
    "parcelles": ["BE0152", "BE0153"]
}

Ok mais dans ce cas on pourrait se passer de la boucle for mais surtout la condition if(filtre[key].find((elmt) => item[key].includes(elmt))) me semble ne pas convenir car elle est vraie si au moins un �l�ment de filtre[key] se trouve dans item[key] et non si tous les �l�ments s'y trouvent (or c'est �a que l'on veut).

Si tu tiens � utiliser la m�thode find, on pourrait modifier comme ceci if(!filtre[key].find((elmt) => !item[key].includes(elmt)))... Mais en fait ce serait plus simple d'utiliser dans ce cas la m�thode every (cf.exemple ci-dessous)...

**********
Dans ton crit�re de recherche il y a avait aussi l'ID unique, du coup pour suivre ta logique l'objet filtre pourrait �tre par exemple comme en �a :

Code JavaScript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
var filtre = {
    "id": 3,
    "parcelles": ["BE0152", "BE0153"]
}

J'�vite aussi d'utiliser la m�thode filter car il est plus performent de s�arr�ter imm�diatement si l'on trouve l'objet avec l'id voulu plut�t que de parcourir tout le tableau dans tous les cas...

Voici un code avec affichage pour suivre le d�roulement de l�ex�cution testable directement :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var json =
    [
        {
            "id": 1,
            "parcelles": [
                "BE0152",
                "AO0559",
                "AO0560"
            ]
        },
        {
            "id": 2,
            "parcelles": [
                "AP0055"
            ]
        },
        {
            "id": 3,
            "parcelles": [
                "BE0208",
                "BE0290",
                "BE0309"
            ]
        },
        {
            "id": 4,
            "parcelles": [
                "BE0152",
                "BE0151"
            ]
        }
    ]
 
 
 
function search(filtre, recs) {
    for (let item of recs) {
        if (filtre.id == item.id) {
            // if (!filtre.parcelles.find((elmt) => !item.parcelles.includes(elmt)))
            if (filtre.parcelles.every((elmt) => item.parcelles.includes(elmt))) {
                console.log(`l'objet ayant l'ID ${filtre.id} répond aux critères du filtre...`);
                return item;
            }
            else {
                console.log(`un objet ayant l'ID ${filtre.id} a été trouvé mais il ne répond aux critères du filtre...`);
                return false
            }
        }
    }
    console.log(`Aucun objet ayant l'ID ${filtre.id} n'a été trouvé...`);
    return false
}
 
 
// Exemples
 
console.log("************* exemple 1 *************");
var filtre = {
    "id": 3,
    "parcelles": ["BE0152", "BE0153"]
}
var res = search(filtre, json)
console.log(res);
 
 
console.log("************* exemple 2 *************");
filtre = {
    "id": 3,
    "parcelles": ["BE0208", "BE0290", "BE0309"]
}
 
res = search(filtre, json)
console.log(res);
 
console.log("************* exemple 3 *************");
filtre = {
    "id": 7,
    "parcelles": ["BE0151", "BE0152", "BE0309"]
}
 
res = search(filtre, json)
console.log(res);

**sylvain257** · 07/11/2024, 23h00

En fait, filtre est le param�tre de la fonction 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
 
    async filter(filtre){
 
        return this.filterByInsee(this.insee).then((res) => {   //// je récupère les parcelles d'une ou plusieurs communes
            var recs = res.records; /// la réponse
 
            recs = recs.filter(item => {
                for(var key in filtre){
                    if(key === "parcelles"){
                        if(filtre[key].find((elmt) => item[key].includes(elmt))){
                        return true;
                        } else {
                            return false;
                        }
                    }
                    if(item[key] === "undefined" || item[key] != filtre[key]){
                        return false
                    }
                }
                return true;
            })
 
            return recs;
 
        })
    }

De mon c�t�, le code semble plut�t bien fonctionner, je ne sais pas du tout si cela correspond � des bonnes pratiques, mais �a fonctionne. Et merci pour le code @Beginner.

Merci pour vos collaborations,

Sylvain

**Beginner.** · 07/11/2024, 23h10

Envoy� par sylvain257

En fait, filtre est le param�tre de la fonction comme suit :

Oui mais cela ne nous dit pas ce qu'est ce param�tre, j'ai essay� de deviner dans mon message pr�c�dent, peux-tu me dire si c'est bien �a ?

Comment tu appelles la fonction async filter(filtre) (tu mets quoi � la place de filtre) ?

Et le nom de cette fonction est le m�me que la m�thode filter ?

Envoy� par sylvain257

De mon c�t�, le code semble plut�t bien fonctionner, je ne sais pas du tout si cela correspond � des bonnes pratiques, mais �a fonctionne.

Ben lis mon message pr�c�dent... (tenir compte de l'id, �viter la m�thode filter...) et encore avant je t'avais parl� de la condition if(item[key] === "undefined" || item[key] != filtre[key]) qui est �trange, et d'ailleurs attention "undefined" c'est une chaine de caract�res, tu testes donc si item[key] est �gale � cette chaine et non si item[key] est ind�fini (undefined)...

PS : Es-tu s�r qu'il fonctionne ton code ?

Peux-tu tester les exemples que j'ai donn�s pour voir... Notamment dans le cas dont tu parlais (o� le tableau parcelles contient plus de deux �l�ments � chercher) :

Envoy� par sylvain257

Comment ferais tu si tu devais croiser une demande pour redescendre tous les enregistrements dont l'array parcelles contient "BE0152" et "BE0153" ainsi que l'id = 3 ?

PS2 : Si quelqu'un a compris le code, une explication serait la bienvenue... Quelque chose doit m'�chapper...

**NoSmoking** · 08/11/2024, 11h49

Bonjour,
bien des choses m'�chappent �galement et notamment le fait de d�clarer une cl� ("parcelles") pour le filtre qui ne devrait donc pas �tre � reprise en dur � dans la fonction !

Si l'id est unique il me semble qu'il y aurait mati�re � faire plus simple.

...

**Beginner.** · 08/11/2024, 15h47

Merci NoSmoking,

Je trouvais aussi que c'�tait dommage de ne pas exploiter le fait que l'ID soit unique...

Filtre sur un tableau

JavaScript

Discussions similaires

Partager

Partager