web-dev-qa-db-fra.com

Convertir un objet ou un tableau javascript en json pour les données ajax

Je crée donc un tableau avec des informations sur les éléments. Je boucle tous les éléments et enregistre l'index. Pour une raison quelconque, je ne peux pas convertir ce tableau en objet JSON!

Ceci est ma boucle de tableau:

var display = Array();
$('.thread_child').each(function(index, value){
   display[index]="none";
   if($(this).is(":visible")){
      display[index]="block";
   }
});

J'essaie de le transformer en objet JSON en:

data = JSON.stringify(display);

Il ne semble pas envoyer le bon format JSON!

Si je le code comme ça, cela fonctionne et envoie des informations:

data = {"0":"none","1":"block","2":"none","3":"block","4":"block","5":"block","6":"block","7":"block","8":"block","9":"block","10":"block","11":"block","12":"block","13":"block","14":"block","15":"block","16":"block","17":"block","18":"block","19":"block"};

Lorsque je fais une alerte sur l'objet JSON.stringify, son apparence est identique à celle de l'objet codé à la main. Mais ça ne marche pas.

Je deviens fou en essayant de résoudre ça! Qu'est-ce que j'oublie ici? Quelle est la meilleure façon d'envoyer cette information pour obtenir le format codé à la main?

J'utilise cette méthode ajax pour envoyer des données:

$.ajax({
        dataType: "json",
        data:data,
        url: "myfile.php",
        cache: false,
        method: 'GET',
        success: function(rsp) {
            alert(JSON.stringify(rsp));
        var Content = rsp;
        var Template = render('tsk_lst');
        var HTML = Template({ Content : Content });
        $( "#task_lists" ).html( HTML );
        }
    });

Utilisation de la méthode GET parce que j'affiche des informations (pas de mise à jour ni d'insertion). Envoyer uniquement des informations d'affichage à mon fichier php.

SOLUTION FINALE

var display = {};
$('.thread_child').each(function(index, value){
   display[index]="none";
   if($(this).is(":visible")){
      display[index]="block";
   }
});

$.ajax({
        dataType: "json",
        data: display,
        url: "myfile.php",
        cache: false,
        method: 'GET',
        success: function(rsp) {
            alert(JSON.stringify(rsp));
        var Content = rsp;
        var Template = render('tsk_lst');
        var HTML = Template({ Content : Content });
        $( "#task_lists" ).html( HTML );
        }
    });
javascriptarraysjsonstringify
32
Christine Wilson

Je ne suis pas tout à fait sûr mais je pense que vous êtes probablement surpris de la façon dont les tableaux sont sérialisés en JSON. Isolons le problème. Considérons le code suivant:

var display = Array();
display[0] = "none";
display[1] = "block";
display[2] = "none";

console.log( JSON.stringify(display) );

Cela va imprimer:

["none","block","none"]

Voici comment JSON sérialise un tableau. Cependant, ce que vous voulez voir est quelque chose comme:

{"0":"none","1":"block","2":"none"}

Pour obtenir ce format, vous voulez sérialiser un objet, pas un tableau. Donc, réécrivons le code ci-dessus comme ceci:

var display2 = {};
display2["0"] = "none";
display2["1"] = "block";
display2["2"] = "none";

console.log( JSON.stringify(display2) );

Cela imprimera dans le format que vous voulez.

Vous pouvez jouer avec ceci ici: http://jsbin.com/oDuhINAG/1/edit?js,console

70
Shital Shah

Vous pouvez utiliser JSON.stringify(object) avec un objet et je viens d'écrire une fonction qui convertira récursivement un tableau en objet, comme ceci JSON.stringify(convArrToObj(array)), qui est le code suivant (plus de détails peuvent être trouvé sur cette réponse ):

// Convert array to object
var convArrToObj = function(array){
    var thisEleObj = new Object();
    if(typeof array == "object"){
        for(var i in array){
            var thisEle = convArrToObj(array[i]);
            thisEleObj[i] = thisEle;
        }
    }else {
        thisEleObj = array;
    }
    return thisEleObj;
}

Pour le rendre plus générique, vous pouvez remplacer la fonction JSON.stringify Et vous n'aurez plus à vous en soucier. Pour ce faire, il vous suffit de coller ceci en haut de votre page:

// Modify JSON.stringify to allow recursive and single-level arrays
(function(){
    // Convert array to object
    var convArrToObj = function(array){
        var thisEleObj = new Object();
        if(typeof array == "object"){
            for(var i in array){
                var thisEle = convArrToObj(array[i]);
                thisEleObj[i] = thisEle;
            }
        }else {
            thisEleObj = array;
        }
        return thisEleObj;
    };
    var oldJSONStringify = JSON.stringify;
    JSON.stringify = function(input){
        return oldJSONStringify(convArrToObj(input));
    };
})();

Et maintenant JSON.stringify Acceptera arrays ou objects! ( lien vers jsFiddle avec exemple )

Modifier:

Voici une autre version qui est un peu plus efficace, bien que cela puisse être ou ne pas être moins fiable (incertain - cela dépend de si JSON.stringify(array) toujours renvoie [], ce que je ne vois pas beaucoup de raisons, alors cette fonction devrait être meilleure car elle nécessite un peu moins de travail lorsque vous utilisez JSON.stringify avec un object):

(function(){
    // Convert array to object
    var convArrToObj = function(array){
        var thisEleObj = new Object();
        if(typeof array == "object"){
            for(var i in array){
                var thisEle = convArrToObj(array[i]);
                thisEleObj[i] = thisEle;
            }
        }else {
            thisEleObj = array;
        }
        return thisEleObj;
    };
    var oldJSONStringify = JSON.stringify;
    JSON.stringify = function(input){
        if(oldJSONStringify(input) == '[]')
            return oldJSONStringify(convArrToObj(input));
        else
            return oldJSONStringify(input);
    };
})();

jsFiddle avec exemple ici

test de performance js ici, via jsPerf

17
JVE999