Transformer un flux xml en une table html via javascript

Soyez le premier à donner votre avis sur cette source.

Snippet vu 16 395 fois - Téléchargée 16 fois

Commenter

Contenu du snippet

Sur le modèle de ma source précédente (qui transforme une matrice JS en TABLE HTML) voici une fonction qui se "nourrit" d'un objet XML pour créer la TABLE!
Le flux XML doit être obtenu au préalable: HTTPrequest, Datawebservice, à vous le choix pour obtenir un objet XML au sens javascript qui contient les données à afficher. XMLnode est cet objet.
NodeName contient le nom des noeuds "enfants" à récupérer
attrName est un tableau (array) des attributs à afficher dans la table, ce tableau remplis également l'entête de la TABLE.
Le résultat est un objet TABLE à ajouter dans votre page à l'aide de appendChild (comme ma source précédente donc).

La fonction ValeurAttribut permet de récupérer un attribut XML à la fois pour IE et FF.

Source / Exemple : 


// génère un tableau HTML sur la base d'un noeud XML, le nom des noeuds qu'on veut extraire, 
// et la liste des attributs contenant les données
// XMLnode : objet XML noeud à parcourir
// NodeName : nom des noeuds à rechercher
// attrName = array des noms d'attributs à rechercher
// return : objet table à ajouter (appendChild)
function CreateTableFromXMl(XMLnode, NodeName, attrName) {
	var elts = XMLnode.getElementsByTagName(NodeName);
	if (!elts) return; // rien si vide
	
	var tbl = document.createElement("TABLE");
	tbl.setAttribute("border", 1);
	var tr = document.createElement("TR");
	var tbody=document.createElement("TBODY");
	var thead=tbl.createTHead();
	var tfoot=tbl.createTFoot();	

	var n=attrName.length;
	for (var j = 0; j < n; j++) {
		var td = document.createElement("TH");
		td.appendChild(document.createTextNode(attrName[j]));
		tr.appendChild(td);
	}
	thead.appendChild(tr);
	
	m = elts.length;
	for(var i = 1; i < m; i++){
		var tr = document.createElement("TR");
		for(var j = 0; j < n ;j++){
			var td=document.createElement("TD");
			td.appendChild(document.createTextNode(ValeurAttribut(elts[i], attrName[j])));
			tr.appendChild(td);
		}
		tbody.appendChild(tr);	
	}
	
	tbl.appendChild(thead);
	tbl.appendChild(tfoot);
	tbl.appendChild(tbody);
	return tbl;
}

function ValeurAttribut(noeud, attribut) {
  if (!noeud) return "";
  if ((!attribut) || (attribut=="")) return "";
  if (noeud.getAttribute(attribut)) return noeud.getAttribute(attribut);
  if (noeud.attributes[attribut]) return noeud.attributes[attribut].value;
  return "";
}

A voir également

Ajouter un commentaire

Commentaires

Signaler
pifou25
Messages postés
150
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014
 -
ha! ça c'est très bon comme solution ^^ et tu arrive à modifier juste une partie de page, un tableau? ça m'intéresse :)
Signaler
cs_sim38
Messages postés
9
Date d'inscription
samedi 4 novembre 2006
Statut
Membre
Dernière intervention
20 novembre 2008
 -
Personnellement j'ai trouvé une autre solution qui me convient plus. En utilisant un fichier xml et un fichier xslt j'arrive à afficher mon fichier xml (flux rss) comme une page html.
A+
Signaler
pifou25
Messages postés
150
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014
 -
je ne sais plus, il faudrait vérifier, je crois que la fonction ne s'applique pas sur le résultat httprequest mais sur le 1er noeud XML reçu. il y a toujours qu'un seul noeud unique en XML à la racine, c'est celui la.
Signaler
fs074995
Messages postés
8
Date d'inscription
jeudi 3 août 2006
Statut
Membre
Dernière intervention
18 février 2009
 -
J'ai le même problème
je pense que le chargement du fichier .xml via
XMLnode = docXml.load("xxxx.xml"); n'est pas bon.
Mais pourquoi?
un document.write(XMLnode); donne simplement true
et firebug dit que
XMLnode.getElementsByTagName(NodeName) n'est pas un fonction!!!
Je nage....
Signaler
cs_sim38
Messages postés
9
Date d'inscription
samedi 4 novembre 2006
Statut
Membre
Dernière intervention
20 novembre 2008
 -
Bonjour,
Je galère... Je n'arrive rien à afficher... voici ma page html si vous avez des idées :

<html>
<head>
<title>Tableau depuis xml</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- <script type="text/javascript" src="table_depuis_xml.js"></script> -->

<script type="text/javascript">
AfficheDocXML();
// génère un tableau HTML sur la base d'un noeud XML, le nom des noeuds qu'on veut extraire,
// et la liste des attributs contenant les données
function AfficheDocXML(){
if (document.implementation && document.implementation.createDocument) {
// déclaration pour Mozilla et FF
docXml = document.implementation.createDocument('', '', null);
document.write ("Firefox");

}
else if (window.ActiveXObject){
// déclaration pour IE
docXml = new ActiveXObject("Microsoft.XMLDOM");
document.write ("IE");
}
else {

alert('Votre navigateur ne saurait pas éxécuter ce script.');

}

XMLnode = docXml.load("catalogue.xml");
NodeName = 'Name';
attrName = '';

// XMLnode : objet XML noeud à parcourir
// NodeName : nom des noeuds à rechercher
// attrName = array des noms d'attributs à rechercher
// return : objet table à ajouter (appendChild)

var elts = XMLnode.getElementsByTagName(NodeName);
if (!elts){document.write ("pas de name");} return; // rien si vide

var tbl = document.createElement("TABLE");
tbl.setAttribute("border", 1);
var tr = document.createElement("TR");
var tbody=document.createElement("TBODY");
var thead=tbl.createTHead();
var tfoot=tbl.createTFoot();

//var n=attrName.length;
for (var j = 0; j < 100; j++) {
var td = document.createElement("TH");
td.appendChild(document.createTextNode(attrName[j]));
tr.appendChild(td);
}
thead.appendChild(tr);

//m = elts.length;
for(var i = 1; i < 200; i++){
var tr = document.createElement("TR");
for(var j = 0; j < n ;j++){
var td=document.createElement("TD");
td.appendChild(document.createTextNode(ValeurAttribut(elts[i], attrName[j])));
tr.appendChild(td);
}
tbody.appendChild(tr);
}

tbl.appendChild(thead);
tbl.appendChild(tfoot);
tbl.appendChild(tbody);
return tbl;
}

}

function ValeurAttribut(noeud, attribut) {
if (!noeud) return "";
if ((!attribut) || (attribut=="")) return "";
if (noeud.getAttribute(attribut)) return noeud.getAttribute(attribut);
if (noeud.attributes[attribut]) return noeud.attributes[attribut].value;
return "";
}


</script>
</head>

</html>
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (pifou25)