Récupérer une liste JSonObject provenant du controleur

**momjunior** · 12/06/2020, 00h41

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, 11h07

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, 14h26

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, 19h23

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, 23h53

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, 19h09

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

**momjunior** · 14/06/2020, 23h20

ça ne marche toujours pas:

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

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
  $(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:

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

**Toufik83** · 14/06/2020, 23h59

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

**momjunior** · 15/06/2020, 00h49

Toujours rien.

J'ai essayé d'abord ceci:

Code :

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

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:

result1: undefined

Ensuite ceci:

Code :

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

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:

result2: undefined undefined

**Toufik83** · 15/06/2020, 00h54

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

Code :

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

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

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

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 !
}

**momjunior** · 15/06/2020, 12h45

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 :

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

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
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.

**NoSmoking** · 16/06/2020, 19h20

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

**Toufik83** · 17/06/2020, 00h01

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 :

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

 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.

**momjunior** · 17/06/2020, 12h50

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.

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

jQuery

Discussions similaires

Partager

Partager