Retour de chaîne résultant de la méthode Ajax

J’ai un graphique DoughnutChart et je voudrais changer la couleur de ses parties en ce qui concerne les hexa-codes de couleur enregistrés dans la firebase database. J’ai utilisé cette méthode Ajax pour obtenir la chaîne de couleur en appelant une méthode d’action qui renvoie le résultat JSON.

getcolors: function getcolors(name) { return $.ajax({ url: "/api/ideas/getcolors", data: { name: name }, type: "GET", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data, textStatus, jqXHR) { // return data; }, error: function (data) { // return "Failed"; }, async: true });

mais au lieu de recevoir la chaîne, j’ai reçu Object {readyState: 1} dans la fenêtre de la console entrez la description de l'image ici

Cependant, je peux trouver la valeur de couleur stockée dans l’élément ResponseText.J’ai besoin de votre aide pour savoir comment obtenir la valeur de couleur sous forme de chaîne.

MODIFIER :

Pour que les choses soient plus claires, je voudrais invoquer la méthode ajax pour recevoir la chaîne de couleur. Je pourrai ensuite insérer le tableau de couleurs du graphique.

 getColorArray: function getColorArray(categories) { var colors = []; for (var i = 0; i < categories.length; i++) { console.log(this.getcolors("Risk")); //colors.push(this.getcolors(categories[i])); } return colors; }

Pourquoi ton code est comme ça?

 success: function (data, textStatus, jqXHR) { // return data; },

L’avez-vous utilisé?

 success: function (data, textStatus, jqXHR) { console.log(data); }

OK j’ai compris. Lorsque vous utilisez une requête ajax, votre travail fonctionne avec des données asynchrones. Pour ce faire, vous devez renvoyer une promesse dans votre méthode. S’il vous plaît, essayez d’utiliser le code ci-dessous.

 getcolors: function getcolors(name) { return $.ajax({ url: "/api/ideas/getcolors", data: { name: name }, type: "GET", contentType: "application/json; charset=utf-8", dataType: "json", }); }

Et pour utiliser votre fonction, utilisez ce code:

 getcolors("name").done(function(result){ console.log(result); });

Ou vous pouvez utiliser un rappel

 getcolors: function getcolors(name, success, error) { return $.ajax({ url: "/api/ideas/getcolors", data: { name: name }, type: "GET", contentType: "application/json; charset=utf-8", dataType: "json", success: function(data){ success(data); }, error: function(data){ error(data); } }); }

… et à utiliser avec les rappels:

 getcolors("name", function(data){ //success function console.log(data); }, function(){ //Error function console.log(data); })

Essayez l’une de ces options et indiquez le résultat.

La solution

Tout d’abord, je voudrais remercier Mateus Koppe pour ses efforts. Grâce à sa solution, j’ai trouvé le moyen de résoudre mon problème. à une fonction de rappel qui gère le résultat comme suit:

 getcolors: function getcolors(name, handleData) { $.ajax({ url: "/api/ideas/getcolors", data: { name: name }, type: "GET", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { handleData(data.responseText); //return data.responseText; }, error: function (data) { handleData(data.responseText); //return data.responseText; }, async: false });

Ensuite, j’ai travaillé avec getColorArrayModified pour parcourir ma liste de catégories et remplir sa propre couleur.

  getColorArrayModified: function getColorArrayModified(categories) { var colors = []; for (var i = 0; i < categories.length; i++) { this.getcolors(categories[i], function (output) { colors.push(output); }); } return colors; }

Merci pour tout :).