Récupérer une liste JSonObject provenant du controleur

**momjunior** · 11/06/2020, 23h41

Bonsoir

J'utilise Spring pour récupérer une liste d'objets et je les renvoie à ajax pour l'affichage:

Code Java :

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
@RequestMapping(value="/rechercherEntree", method=RequestMethod.POST)
	public @ResponseBody ResponseEntity<Object> getAll(ModelMap model, @RequestParam(name = "critereRecherche") String critereRecherche, @RequestParam(name = "valeurRecherche") String valeurRecherche)  {
 
 
		List<Entree> entityList = null;
		String critere = critereRecherche;
 
		if(critere.equals("nomClient"))
			entityList = entreeService.findEntreeByNomClient(valeurRecherche);
		else if(critere.equals("numDossier"))
			entityList = entreeService.findEntreeByNumDossier(valeurRecherche);
		else if(critere.equals("numEntree"))
			entityList = entreeService.findEntreeByNumEntree(valeurRecherche);
		else if(critere.equals("dateEntree"))
			entityList = entreeService.findEntreeByDateEntree(valeurRecherche);
 
		if (entityList.isEmpty()) {
			return new ResponseEntity<Object>("Aucun résultat trouvé!!!" , HttpStatus.BAD_REQUEST);
		} 
		else
		{
			List<JSONObject> entities = new ArrayList<JSONObject>();
		    for (Entree n : entityList) {
		    	JSONObject entity = new JSONObject();
		    	entity.put("idEntree", n.getIdEntree());
		    	entity.put("nomClient", n.getNomClient());
		    	entity.put("numDossier", n.getNumDossier());
		    	entity.put("numEntree", n.getNumEntree());
		    	entity.put("dateEntree", n.getDateEntree());
		    	entity.put("typeEntree", n.getTypeEntree());
		    	entity.put("nomArticle", n.getNomArticle());
		    	entity.put("typeArticle", n.getTypeArticle());
		    	entity.put("quantiteEntree", n.getQuantiteEntree());
		        entities.add(entity);
		    }
 
		    System.out.println(Arrays.toString(entities.toArray()));
 
		    return new ResponseEntity<Object>(entities, HttpStatus.OK);
		}

La ligne :

Code :

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

System.out.println(Arrays.toString(entities.toArray()));

me permet de constater que les données sont bien récupérées. Elle m'affiche ceci:

[{"numDossier":"2903062020","numEntree":"2903062020","nomArticle":"Pneus","typeEntree":"consommation","dateEntree":"06/10/2020","quantiteEntree":10,"typeArticle":"test","nomClient":"total","idEntree":14}, {"numDossier":"2903062020","numEntree":"21212121212","nomArticle":"Pneus","typeEntree":"consommation","dateEntree":"06/10/2020","quantiteEntree":10,"typeArticle":"test","nomClient":"total","idEntree":15}, {"numDossier":"2903062020","numEntree":"7454545454","nomArticle":"Pneus","typeEntree":"consommation","dateEntree":"06/10/2020","quantiteEntree":10,"typeArticle":"test","nomClient":"total","idEntree":16}, {"numDossier":"2903062020","numEntree":"7454545454","nomArticle":"Roues","typeEntree":"consommation","dateEntree":"06/10/2020","quantiteEntree":10,"typeArticle":"test","nomClient":"total","idEntree":20}]

Ensuite je récupère cette liste dans ma requête ajax:

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
var form = $('#form_rechercher_entree');
 
	  /* Send the data using post and put the results in a div */
	  request =$.ajax({
		  url: form.attr('action'),  
		  type: "POST",
		  data:form.serialize(),
	      beforeSend: function() {
	        $('#load-img').show();
	        },
	      success: function(response, textStatus, jqXHR){
	          $('#load-img').hide();
 
 
	          var jsonObj = JSON.parse(JSON.stringify(response));
	      //  console.log(JSON.stringify(response));
	          for (var i = 0; i < jsonObj.length; i++) {
	        	  console.log("id: "+jsonObj[i]['idEntree']);
	        	  console.log("nom: "+jsonObj[i]['nomClient']);
	        	  console.log("dossier: "+jsonObj[i]['numDossier']);
	        	  console.log("numEntree: "+jsonObj[i]['numEntree']);
	        	  console.log("dateEntree: "+jsonObj[i]['dateEntree']);
	        	  console.log("typeEntree: "+jsonObj[i]['typeEntree']);
	        	  console.log("nomArticle: "+jsonObj[i]['nomArticle']);
	        	  console.log("typArticle: "+jsonObj[i]['typeArticle']);
	        	  console.log("quantiteEntree: "+jsonObj[i]['quantiteEntree']);
	          }	             
 
	      },
	      error:function(jqXHR, textStatus, errorThrown){
	           $('#load-img').hide();
	           $('.resultat').html(jqXHR.responseText);
	           $('.resultat').css('color', 'red');
	      }

Sauf que je reçois un contenu vide:

id: undefined
nom: undefined
dossier: undefined
numEntree: undefined
dateEntree: undefined
typeEntree: undefined
nomArticle: undefined
typArticle: undefined
quantiteEntree: undefined

Merci

**NoSmoking** · 12/06/2020, 10h07

Bonjour,
ce qui transite par le réseaux est une chaine de caractères et lorsque tu utilises jQuery, si tu ne précises pas le type de donnée que tu attends tu recevra une chaine de caractères.
C'est la propriété dataType qui te permet de le définir, voir la documentation officiel : https://api.jquery.com/jQuery.ajax/.

Dans ton cas tu JSON.stringify une chaine de caractères ce qui fait que tu ajoutes un niveau de double quotes.
Ensuite tu JSON.parse ce qui fait que tu reviens à ta chaine initiale, il te faudrait donc faire un JSON.parse de plus pour obtenir un Object.

Pour test :

Code :

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

1
2
3
4
5
6
7
8
let str = '[{"nom":"Durand", "prénom":"Jean","age":"ça change tout le temps"}]';
console.log("Chaine initiale : ", str);
let jsonStr = JSON.stringify(str);
console.log("JSON.stringify  : ", jsonStr);
let jsonObj = JSON.parse(jsonStr);
console.log("JSON.parse      : ", jsonObj);
jsonObj = JSON.parse(jsonObj);
console.log("re JSON.parse   : ", jsonObj);

tu obtiendras quelque chose comme :

Code :

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

1
2
3
4
> "Chaine initiale : " "[{"nom":"Durand", "prénom":"Jean","age":"ça change tout le temps"}]"
> "JSON.stringify  : " ""[{\"nom\":\"Durand\", \"prénom\":\"Jean\",\"age\":\"ça change tout le temps\"}]""
> "JSON.parse      : " "[{"nom":"Durand", "prénom":"Jean","age":"ça change tout le temps"}]"
> "re JSON.parse   : " Array [Object { nom: "Durand", prénom: "Jean", age: "ça change tout le temps" }]

**momjunior** · 12/06/2020, 13h26

Merci pour ta réponse.

J'ai d'abord changé le type de retour comme tu me l'as conseillé en choisissant script, ensuite j'ai essayé de parser comme tu l'as fait mais le contenu est toujours vide:

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
request =$.ajax({
		  url: form.attr('action'),  
		  type: "POST",
		  data:form.serialize(),
		  dataType: "script",
	      beforeSend: function() {
	        $('#load-img').show();
	        },
	      success: function(response, textStatus, jqXHR){
	          $('#load-img').hide();
 
	       let jsonStr = JSON.stringify(response);
	       console.log(jsonStr);
	      let jsonObj = JSON.parse(jsonStr);
	       console.log(jsonObj);
	       jsonObj = JSON.parse(jsonObj);
	       console.log("re JSON.parse   : ", jsonObj);

Résulat:

"[{\"empty\":false},{\"empty\":false},{\"empty\":false},{\"empty\":false}]"
[{"empty":false},{"empty":false},{"empty":false},{"empty":false}]
re JSON.parse : (4)*[{…}, {…}, {…}, {…}]

**NoSmoking** · 12/06/2020, 18h23

J'ai d'abord changé le type de retour comme tu me l'as conseillé en choisissant script,

drôle de choix, attendu que tu veux traiter du json alors il te faut indiquer dataType: "json" et jQuery se charge de te livrer un objet JSON.

Le code avec les JSON.parse et stringify était là juste pour te montrer ce qui se passait, tu n'en auras donc pas besoin.

Nota : il te faut lire attentivement la documentation

**momjunior** · 12/06/2020, 22h53

J'ai choisi dataType: "script" car je reçois ceci comme retour:

object Object],[object Object],[object Object],[object Object]

Alors que avec dataType: "json", j'ai ce message d'erreur:

Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)

**NoSmoking** · 13/06/2020, 18h09

Visiblement tu fait un JSON.parse qui ne sert à rien

Ton code devrait ressembler à :

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
$.ajax({
    url: form.attr("action"),
    type: "POST",
    data: form.serialize(),
    dataType: "json",          // format attendu en retour
    beforeSend: function () {
      $("#load-img").show();
    }
  })
  .done(function (data, textStatus, jqXHR) {
    $("#load-img").hide();
    console.log(data);
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
      console.log("Erreur :", textStatus);
  });

Récupérer une liste JSonObject provenant du controleur [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager