Jquery Comment obtenir des informations à partir d'une chaîne JSON complexe

Question

S'il vous plaît je cette forme:

<form> 

    <p> 
     <label for="field_userAddress">Adresse (*)</label> 
     <input type="text" name="userAddress" id="field_userAddress" /> 
    </p> 
    <p> 
     <label for="field_userCP">CP (*)</label> 
     <input type="text" name="userCP" id="field_userCP" /> 
    </p> 
    <p> 
     <label for="field_vars[1]">vars one (*)</label> 
     <input type="text" name="vars[1]" id="field_uservars[1]" /> 
    </p> 
    <p> 
     <label for="field_vars[2]">Vars two (*)</label> 
     <input type="text" name="vars[2]" id="field_vars[2]" /> 
    </p> 


</form> 

Et je désire contrôler les champs en utilisant AJAX, donc je l'ai fait le travail sur le côté php et enfin je demande à l'aide JQuery une chaîne json de cette façon:

{ 
    "status": 0, 
    "err": { 
     "userAddress": "required", 
     "userCP": "required" 
    }, 
    "errr": { 
     "vars": { 
      "1": "required", 
      "2": "required" 
     } 
    } 
} 

Je veux afficher tous les messages devant le champ en question.

Pour la première "err", j'utilisé ces lignes et il fonctionne:

$.each(r.err,function(k,v) 
         { 
          form.find('[name='+k+']').closest('p').append(v); 
         }); 

mais pour le second "errr", j'ai essayé ces lignes:

$.each(r.errr.vars,function(y,z) 
         { 
          form.find('[name="'+y+'['+z+']"'+']').closest('p').append(z); 
         }); 

Il doesn ne fonctionne pas! J'ai trouvé cela un peu complexe pour moi. S'il vous plaît tout conseil?

Answer 1

Je pense qu'il vous manque une partie du point de json. Si vous voulez une variété de champs obligatoires, vous devriez simplement avoir un seul tableau json appelé.

{ 
    "err": { 
    "required": ["userAddress", "userCP"] 
    }, 

    "errr": { 
    "vars": { 
     "required": ["1", "2"]; 
    }, 
    } 
} 

Et si vous voulez analyser cette

.each $ (r.err, fonction (k, v) { $ ('form [name =' + v + ']') .clos ('p'). append (k); });

Answer 2

Vous devez échapper les [] qui font partie du nom par les règles d'échappement du sélecteur jQuery.

Cela devrait fonctionner:

$.each(r.errr.vars,function(y,z) { 
     form.find('input[name="vars\\['+y+'\\]"]').closest('p').append(z); 
}); 

API docs http://api.jquery.com/category/selectors/

Lire premier paragraphe concernant échapper

Answer 3

Je vous conseille d'utiliser ID de cibler les champs d'entrée spécifiques et la main sur le message d'erreur. Au lieu d'utiliser [] dans l'attribut id i suggère de faire quelque chose comme ceci:

HTML:

<form> 
    <p> 
     <label for="field_userAddress">Adresse (*)</label> 
     <input type="text" name="userAddress" id="field_userAddress" /> 
    </p> 
    <p> 
     <label for="field_userCP">CP (*)</label> 
     <input type="text" name="userCP" id="field_userCP" /> 
    </p> 
    <p> 
     <label for="field_vars_1">vars one (*)</label> 
     <input type="text" name="vars[1]" id="field_vars_1" /> 
    </p> 
    <p> 
     <label for="field_vars_2">Vars two (*)</label> 
     <input type="text" name="vars[2]" id="field_vars_2" /> 
    </p> 
</form>​ 

JavaScript:

$.each(r.errr.vars,function(y,z) { 
    form.find('input#field_vars_'+y).parent().append('<span>'+z+'</span>'); 
}); 

fonctionne très bien. // http://jsfiddle.net/bbSw9/