Populer Dijit.form.FilteringForm avec des données JSON [Résolu]

[andlio]

Bonjour,

Je sais qu'il y a des tonnes de topics à ce sujet. Mais j'ai beau les lire et relire, Je n'arrive pas à les adapter.

Je pense que ça viens du manque de maitrise des stores de ma part...

Ça me parait pourtant simple, je dois remplir un FilteringForm avec des données JSon récupérer par une requête Ajax. L'objet JSon récupérer possède la structure suivante :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
     status:...,
     message:...,
     responses:
          [
               {
                    id:...
                    user:{...}
               },
               {
                    id:...
                    user:{...}
               },
               ...
          ]
}

"status" et "message" indiquent le status de la requête (Failed, Success...) ainsi qu'un message optionnel indiquant la cause de l'erreur.
"responses" est un tableau contenant les résultats. C'est cette liste qui doit être affichée dans le FilteringSelect.

1ère question : comment indiquer au store que la liste des données est "responses" et non pas la racine de l'objet ?
2ème question : comment indiquer au FilteringSelect que l'id est "user.id" et le label "user.fullName" ?

Voici mon store :

Code :

1
2
3
this.membersStore = new dojo.data.ItemFileReadStore({
     url: lib.utils.getSlashedUrl() + "ajaxGetMembers?responsibility=" + this.responsibility,
});

Et voici mon widget :

Code :

1
2
3
4
5
6
this.membersSelect = new dijit.form.FilteringSelect(
     {
          store: this.membersStore,
     }, 
     dojo.query(".selectMembers", this.container)[0]
);

PS : la requête est envoyée par memberStore (vérifié avec Firebug), mais il semble être vide.

[emmanuel.remy]

Bonjour,

Il n'existe pas de solution triviale dans ton cas. Pourquoi ne pas plutôt écrire 3 lignes de code qui transforment ta structure JSON personnelle en une structure JSON de store, avec identifier et label ? Comme ça t'es en natif et plus de souci.

ERE

[andlio]

Bonjour Emmanuel,

Effectivement je me suis rapproché d'une telle solution :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
lib.utils.sendAjaxRequest({
     url:lib.utils.getSlashedUrl() + "ajaxGetMembers?responsibility=" + this.responsibility,
     method:"get",
     type:"json",
     success:dojo.hitch(this, function(data){
          this.membersStore.data = {
               items: data,
          };
 
          this.togglePanels();
     }),
});

lib.utils.sendAjaxRequest est une fonction "maison" qui envoi la requête, traite le status de l'objet JSon et appelle la méthode "success" en lui passant en paramètre le tableau "responses" de l'object JSon.

Je récupère donc l'objet JSon ci-dessous, mais ma liste affiche 3 fois "mon groupe".
Comment dire que l'id est "id", le label est "fullName", et qu'il ne doit pas être récursif ?

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
{
    "message": "",
    "status": 1,
    "responses": [
        {
            "id": 1,
            "group": {
                "name": "mon groupe",
                "id": 1
            },
            "fullName": "Prenom1 Nom1",
            "firstname": "Prenom1",
            "lastname": "Nom1"
        },
        {
            "id": 2,
            "group": {
                "name": "mon groupe",
                "id": 1
            },
            "fullName": "Prenom2 Nom2",
            "firstname": "Prenom2",
            "lastname": "Nom2"
        },
        {
            "id": 3,
            "group": {
                "name": "mon groupe",
                "id": 1
            },
            "fullName": "Prenom3 Nom3",
            "firstname": "Prenom3",
            "lastname": "Nom3"
        }
    ]
}

[andlio]

Au fait, j'ai essayé en remplaçant

Code :

1
2
3
this.membersStore.data = {
     items: data,
};

par

Code :

1
2
3
4
5
this.membersStore.data = {
     identifier: "id",
     label:"fullName",
     items: data,
};

Mais j'ai l'erreur suivante :

Error: dojo.data.ItemFileReadStore: The json data provided by the creation arguments is malformed. Items within the list have identifier: [id]. Value collided: [1]

Je suppose que c'est parce que les 3 utilisateurs font partis du même groupe et donc ont le même group.id...

[emmanuel.remy]

Il faudrait que tu mettes les items au format attendu par le store.
Ensuite il faudra voir, car je crois que si il existe des sous-items (des sous-objets), alors dojo les traite comme des items normaux, ce qui peut expliquer ton conflit d'Id.

Mais déjà fabrique une structure JSON telle que dojo l'attend.

ERE

[andlio]

C'est ce que j'ai fais ici :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
this.membersStore = new dojo.data.ItemFileReadStore({
     hierarchical:false,
     label: "fullName",
     identifier: "id",
     data:
          {
               label: "fullName",
               identifier: "id",
               items:data
          }
});
 
this.membersSelect = new dijit.form.FilteringSelect(
     {
          store: this.membersStore,
          autoComplete: true,
          style: "width: 198px;",
          required: false,
     },
     dojo.query(".selectMembers", this.container)[0]
);

avec data =

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
{
 
    "id": 1,
    "group": { … },
    "fullName": "admin admin",
    "isEnable": true,
    "firstname": "admin",
    "lastname": "admin"
 
},
{
 
    "id": 2,
    "group": {...},
    "fullName": "Userfirstname UserLastname",
    "firstname": "Userfirstname",
    "lastname": "UserLastname"
 
},
...
}

Mais ça ne fonctionne pas...

[andlio]

J'ai finalement résolu mon problème tard dans la nuit...

Pour mon store j'ai indiqué hierarchical=false, data.indentifier et data.items

Code :

1
2
3
4
5
6
7
8
9
10
this.membersStore = new dojo.data.ItemFileReadStore(
	{
		hierarchical:false,
		data:
			{
				identifier:"id", 
				items:users
			}
	}
);

Dans mon filteringSelect j'ai indiqué searchAttr 'fullName', du coup il m'affiche store.data.items[n].fullName

Code :

1
2
3
4
5
6
7
8
9
10
this.membersSelect = new dijit.form.FilteringSelect(
	{
		store: this.membersStore,
		autoComplete: true,
		style: "width: 198px;",
		required: false,
		searchAttr:"fullName",
	},
	dojo.query(".selectMembers", this.container)[0]
);

Et voici un example de données au format JSON (this.membersStore.data.items)

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
	{
		id:1,
		fullName:'Lionel A.',
		firstname:'Lionel',
		group:{id:1, name:'my group'}
	},
	{
		id:2,
		fullName:'User 2',
		firstname:'User',
		group:{id:1, name:'my group'}
	},
]

[emmanuel.remy]

Voilà, il faut juste respecter l'implémentation à la lettre (un tableau est un tableau...) !
A ta décharge, il est vrai que l'implémentation du dojo.data.ItemFileReadStore a changé en la v1.3 et la v1.4. L'attribut hierarchicalest alors apparu...

ERE