1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Transformer un flux xml en une table html via javascript

Transformer un flux xml en une table html via javascript

0/5 (5 avis)

Snippet vu 17 198 fois - Téléchargée 18 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
pifou25
Messages postés
144
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014
21 nov. 2008 à 11:14
ha! ça c'est très bon comme solution ^^ et tu arrive à modifier juste une partie de page, un tableau? ça m'intéresse :)
cs_sim38
Messages postés
9
Date d'inscription
samedi 4 novembre 2006
Statut
Membre
Dernière intervention
20 novembre 2008
20 nov. 2008 à 23:16
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+
pifou25
Messages postés
144
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014
20 nov. 2008 à 21:52
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.
fs074995
Messages postés
8
Date d'inscription
jeudi 3 août 2006
Statut
Membre
Dernière intervention
18 février 2009
20 nov. 2008 à 12:26
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....
cs_sim38
Messages postés
9
Date d'inscription
samedi 4 novembre 2006
Statut
Membre
Dernière intervention
20 novembre 2008
18 nov. 2008 à 23:27
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)