Récupérer une liste JSonObject provenant du controleur

Version imprimable

Bonsoir

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

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
@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:

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:

Citation:

[{"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:

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:

Citation:

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

Merci

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:

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:

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" }]

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:

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:

Citation:

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

12/06/2020, 18h23
NoSmoking

Citation:

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 ;)
12/06/2020, 22h53
momjunior

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

Citation:

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

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

Citation:

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

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

Ton code devrait ressembler à :

Code:

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

ça ne marche toujours pas:

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

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
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
  $(function() {
 
//Current request reference; can be used else where
var request;
 
/* attach a submit handler to the form */
$(".btn-rechercher").click(function(event) {
 
	$('tbody').empty();
	 $('.erreur_critereRecherche').html("");
	 $('.erreur_valeurRecherche').html("");
	 $('.resultat').html("");
 
    // abort any pending request
    if (request) {
        request.abort();
    }
  /* stop form from submitting normally */
  event.preventDefault();
 
  var critere = $("#critereRecherche").val();
  var valeur = $("#valeurRecherche").val();  
 
  if ($.trim(critere) ==='') {
	  $('#critereRecherche').css('border-color', 'red');
	  $('.erreur_critereRecherche').html("Choisissez le critère!");
  }
  else
	  {
	  	$('#critereRecherche').css('border-color', '');
	  }
 
  if ($.trim(valeur) ==='') {
	  $('#valeurRecherche').css('border-color', 'red');
	  $('.erreur_valeurRecherche').html("Champ obligatoire!");
  }
  else
	  {
	  	$('#valeurRecherche').css('border-color', '');
	  }
 
  var erreur_critereRecherche = $.trim($(".erreur_critereRecherche").html());
  var erreur_valeurRecherche = $.trim($(".erreur_valeurRecherche").html()); 
 
  if (((erreur_critereRecherche) !== '') ||((erreur_valeurRecherche) !== ''))
  {
	  return false;
  }
  else
  {
 
	  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(),
		  dataType: "json",
	      beforeSend: function() {
	        $('#load-img').show();
	        },
	      success: function(response, textStatus, jqXHR){
	          $('#load-img').hide();
	          var item1 = response.result;
	         // var obj = JSON.parse(response);
 
	      console.log("aaa "+item1);
	        //  var jsonObj = JSON.parse(JSON.stringify(response));
	      //  console.log(JSON.stringify(response));
 
 
	      },
	      error:function(jqXHR, textStatus, errorThrown){
	           $('#load-img').hide();
	           $('.resultat').html(jqXHR.responseText);
	           $('.resultat').css('color', 'red');
	      }  
	  });
	  return false;
	}
});
});

Résultat:

Citation:

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

14/06/2020, 22h59
Toufik83

Et pourquoi tu n'essaies pas de parcourir le data avec $.each ?

Toujours rien.

J'ai essayé d'abord ceci:

Code:

1
2
3
4
5
6
7
 
 dataType: "json",
success: function(response, textStatus, jqXHR){
 
$.each(response, function(i, obj) {
	        	     console.log("result1: "+obj.nomClient);
	        	});

Résulat:

Citation:

result1: undefined

Ensuite ceci:

Code:

1
2
3
4
5
6
7
8
 
 dataType: "json",
success: function(response, textStatus, jqXHR){
 
 var data_length = response.length;
	          for (var i = 0; i < data_length; i++) {
	            console.log("result2: "+response[i]["idEntree"] + " " + response[i]["nomClient"]);
	          }

Résultat:

Citation:

result2: undefined undefined

Inverse le "i" et "obj" comme suite :

Code:

1
2
3
4
 
$.each(response, function(obj, i) {
	        	     console.log("result1: "+obj.nomClient);
	        	});

Et dis moi ce que tu vois, et si ça ne fonctionne pas cela dit que l'objet reçu n'est pas au format json, car j'ai ouvert quelques testes JAVA et j'ai trouvé qu'il fallait ajouter une bibliothèque Gson :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
import com.google.gson.Gson;//celle-ci !
protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
               ....
               Map<String,Object> globalMap=new HashMap();
               Gson gson= new Gson();
                ....
               response.setContentType("application/json;charset=UTF-8");
              out.println(gson.toJson(globalMap));//et ici !
}

Ouf ça marche. Tu m'as donné une piste en disant de regarder du coté du contrôleur, et je me suis rappelé que je pouvais utiliser la méthode getWriter() au lieu de renvoyer un ResponseEntity. Donc j'ai changé le retour de mon controlleur:

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
@RequestMapping(value="/rechercherEntree", method=RequestMethod.POST)
	public void getAll(ModelMap model, @RequestParam(name = "critereRecherche") String critereRecherche, @RequestParam(name = "valeurRecherche") String valeurRecherche, HttpServletResponse response) throws ServletException, IOException {
 
		 response.setContentType("text/html;charset=UTF-8");
 
		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()) {
			response.getWriter().println("Erreur");
		} 
		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()));
 
		    response.getWriter().println(Arrays.toString(entities.toArray()));
		}
 
	}

Et coté ajax j'ai fait ceci:

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
request =$.ajax({
		  url: form.attr('action'),  
		  type: "POST",
		  data:form.serialize(),
		  dataType: "json",
	      beforeSend: function() {
	        $('#load-img').show();
	        },
	      success: function(response, textStatus, jqXHR){
	          $('#load-img').hide();
 
	         var result = response;
 
	         $.each(result, function(i, obj) {
	        	 console.log("id: "+obj.idEntree);
	        	 console.log("nom: "+obj.nomClient);
	        	 console.log("dossier: "+obj.numDossier);
	        	 console.log("numEntree: "+obj.numEntree);
	        	 console.log("dateEntree: "+obj.dateEntree);
	        	 console.log("typeEntree: "+obj.typeEntree);
	        	 console.log("nomArticle: "+obj.nomArticle);
	        	 console.log("typArticle: "+obj.typeArticle);
	        	 console.log("quantiteEntree: "+obj.quantiteEntree);
	        	});

Donc je me demande pourquoi avec le ResponseEntity ça ne marchait pas.

Merci à tous.

16/06/2020, 18h20
NoSmoking

Citation:

Envoyé par momjunior

Donc je me demande pourquoi avec le ResponseEntity ça ne marchait pas.

Ce que je ne comprends pas moi c'est pourquoi dans ton post #1 tu avais un bon retour :koi:
16/06/2020, 23h01
Toufik83

Salut,

NoSmoking, probablement parce qu'il a convertit le retour en string avec JSON.stringify(response) alors qu'il était déjà un string + l'absence de dataType:"json" dans les options d'ajax.

Dans cette ligne:

Code:

var jsonObj = JSON.parse(JSON.stringify(response));

C'est à lui de nous dire s'il a testé dataType:"json" dans le premier post et sans l'utilisation de JSON.parse et JSON.stringify.
17/06/2020, 11h50
momjunior

Dans le 1er post je n'ai pas utilisé dataType:"json"; les codes que j'ai publiés sont bien ceux que j'ai utilisés. C'est par la suite que NoSmoking m'a conseillé de préciser le type de retour avec dataType.