2017-01-30 1 views
0

Je souhaite obtenir plusieurs tags à partir d'un document XML. J'ai regardé this question qui obtient essentiellement des sous-éléments d'une étiquette, alors que je veux toutes les étiquettes. En utilisant le même XML exemple (reproduit ci-dessous):jquery parse xml pour plusieurs tags

var data = 
"<root> 
    <instructions>Some ins text.</instructions> 
    <options> 
     <option>1.png</option> 
     <option>2.png</option> 
     <option>3.png</option> 
     <option>4.png</option> 
    </options> 
    <noOfOptions>4</noOfOptions> 
</root>"; 

Comment puis-je obtenir les valeurs des "instructions", "options" et "noOfOptions"?

je pouvais répéter le code à trois reprises comme ceci:

xml = $.parseXML(data), 
$data = $(xml), 
$options = $data.find("option"); // get all option nodes 

xml = $.parseXML(data), 
$data = $(xml), 
$instructions = $xml.find("instructions"); // get instructions 

xml = $.parseXML(data), 
$data = $(xml), 
$noOfOptions = $xml.find("noOfOptions"); // get noOfOptions 

Mais cela ne semble pas juste. Y a-t-il un moyen correct (et plus efficace) de le faire? Je pense que la fonction .each a quelque chose à voir avec ça, mais je ne comprends pas vraiment comment l'utiliser.

+0

est-il un seul 'instructions 'et mutliple' options'? –

+0

Pas nécessairement. En fait, la plupart du temps, je n'aurai pas besoin de descendre d'un niveau. – Chiwda

+0

Je suis préoccupé par le nombre d'instructions, car dans ma réponse j'ai supposé qu'il n'y en aurait qu'un. Si cela peut être plus alors vous devriez faire un tableau d'eux juste pour les options. –

Répondre

2

var data = 
 
"<root>\ 
 
    <instructions>Some ins text.</instructions>\ 
 
    <options>\ 
 
     <option>1.png</option>\ 
 
     <option>2.png</option>\ 
 
     <option>3.png</option>\ 
 
     <option>4.png</option>\ 
 
    </options>\ 
 
    <noOfOptions>4</noOfOptions>\ 
 
</root>"; 
 

 

 
var xml = $.parseXML(data); 
 
var $data = $(xml); 
 

 
var instructions = $data.find("instructions").text(); 
 
var options = []; 
 
$data.find("option").each(function(){ 
 
    options.push($(this).text()); 
 
}); 
 

 
console.log("instructions: " + instructions); 
 
console.log("options: ", options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1

Si votre structure est fixe, vous pouvez essayer ceci:

var data = 
"<root>"+ 
    "<instructions>Some ins text.</instructions>"+ 
    "<options>"+ 
     " <option>1.png</option>"+ 
     "<option>2.png</option>"+ 
     " <option>3.png</option>"+ 
     " <option>4.png</option>"+ 
    " </options>"+ 
    " <noOfOptions>4</noOfOptions>"+ 
    "<instructions>Some ins text1.</instructions>"+ 
    "<options>"+ 
    " <option>1.png</option>"+ 
     "<option>2.png</option>"+ 
    " <option>3.png</option>"+ 
    " <option>4.png</option>"+ 
    " </options>"+ 
    " <noOfOptions>4</noOfOptions>"+ 
"</root>"; 
xml = $.parseXML(data); 
var arr=[]; 
    var arr=[]; 
    $("instructions", xml).each(function (index,val) { 

     arr[index]=[]; 
     arr[index]['instructions']=$(this).text(); 
     arr[index]['option']=[]; 
     $("option",$(val).next()).each(function(){ 
      arr[index]['option'].push($(this).text()); 
     }); 
     arr[index]['noOfOptions']=[]; 
     arr[index]['noOfOptions']=$($(val).next()).next().text(); 

     }); 
    console.log(arr); 

Console SORTIE:

[Array [0] Array [0]] 0: Array [0] instructions: "Some texte ins." longueur: 0noOfOptions: option "4": Array [4] proto: Array [0] 1: Array [0] longueur: 2__proto__: Array [0]

Fiddle

Si vous avez besoin des données entières comme JSON (peut VBE converti dans le tableau jquery/objet), vous pouvez utiliser: xml2json