Xml content parsed in JS

[pierre]

Hello,

My script gets the content of an XML file in a string of characters thanks
to Ajax.
I'd like to transform the XML content to an HTML table.
Is there an easy way to do so without coding a whole XML parser in JS ?

Thanks in advance,

--
pierre

[Bart Van der Donck]

pierre wrote:

My script gets the content of an XML file in a string of characters thanks
to Ajax.
I'd like to transform the XML content to an HTML table.
Is there an easy way to do so without coding a whole XML parser in JS ?

That shouldn't be a problem, but the code depends on the structure of
the XML file. Could you post it ?

--
Bart

[Martin Honnen]

pierre wrote:

My script gets the content of an XML file in a string of characters thanks
to Ajax.
I'd like to transform the XML content to an HTML table.
Is there an easy way to do so without coding a whole XML parser in JS ?

Ajax? Well that does not really tell what code and APIs you use. If you
are using XMLHttpRequest then it already has XML parsing support for the
response the server sends built in, just make sure the server sends the
answer with an XML MIME type as the Content-Type header e.g.
Content-Type: application/xml
or
Content-Type: text/xml
and XMLHttpRequest parses the response body as XML and populates
requestObject.responseXML as an XML DOM document you can script with DOM
methods (DOM Level 2 Core and XML, some DOM Level 3 Core, DOM Level 3
XPath with Mozilla or with Opera 9, DOM Level 1 XML with IE/MSXML where
MSXML 3 and later support some MSXML specific stuff for XPath).

--

Martin Honnen
http://JavaScript.FAQTs.com/

[pierre]

That shouldn't be a problem, but the code depends on the structure of

the XML file. Could you post it ?

--
Bart

This is my Xml content :

<MyData>
<Columns>
<Column>Id</Column>
<Column>Name</Column>
</Columns>
<Rows>
<Row>
<Id>1</Id>
<Name>Peter</Name>
</Row>
<Row>
<Id>2</Id>
<Name>John</Name>
</Row>
</Rows>
</MyData>

thanks in advance,

--
larry

[pierre]

Ajax? Well that does not really tell what code and APIs you use. If you

are using XMLHttpRequest then it already has XML parsing support for the
response the server sends built in, just make sure the server sends the
answer with an XML MIME type as the Content-Type header e.g.
Content-Type: application/xml
or
Content-Type: text/xml
and XMLHttpRequest parses the response body as XML and populates
requestObject.responseXML as an XML DOM document you can script with DOM
methods (DOM Level 2 Core and XML, some DOM Level 3 Core, DOM Level 3
XPath with Mozilla or with Opera 9, DOM Level 1 XML with IE/MSXML where
MSXML 3 and later support some MSXML specific stuff for XPath).

--

Martin Honnen
http://JavaScript.FAQTs.com/

In fact, I'm coding a web page in which the user can type a SQL query.
I send this query to a PHP script thanks to Ajax.
The PHP script sends XML content back.
The trouble is how to transform this XML content to a simple HTML table.

thanks,

--
pierre

[Martin Honnen]

pierre wrote:

In fact, I'm coding a web page in which the user can type a SQL query.
I send this query to a PHP script thanks to Ajax.
The PHP script sends XML content back.
The trouble is how to transform this XML content to a simple HTML table.

Well if you want a HTML table then certainly one solution is to have
your PHP script create the HTML table and not XML and send the HTML
table back to the client side script.

If your PHP script has to send XML then I have already explained that
XMLHttpRequest on the client does everything to parse the XML it
receives into a DOM document that you can navigate using DOM scripting.
So send your XML with HTTP response header
Content-Type: application/xml
use XMLHttpRequest on the client and traverse responseXML to extract the
XML data you need and build your HTML table with the DOM.
See
<http://www.faqts.com/knowledge_base/view.phtml/aid/6826/fid/616>

In some browsers (IE 6, Firefox/Mozilla, Opera 9) you can also run XSLT
transformations on responseXML thus if you know to write XSLT
stylesheets then you could write one to transform the XML to a HTML
table and run that transformation on the client and insert the result in
your HTML document.
For Mozilla's and Opera's XSLT processor API see here:
<http://developer.mozilla.org/en/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Tran sformations>

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Bart Van der Donck]

pierre wrote:

This is my Xml content :

<MyData>
<Columns>
<Column>Id</Column>
<Column>Name</Column>
</Columns>
<Rows>
<Row>
<Id>1</Id>
<Name>Peter</Name>
</Row>
<Row>
<Id>2</Id>
<Name>John</Name>
</Row>
</Rows>
</MyData>

Here's one way to display this in tabular format:

x = '<MyData ';
x += ' <Columns ';
x += ' <Column>Id</Column ';
x += ' <Column>Name</Column ';
x += ' </Columns ';
x += ' <Rows ';
x += ' <Row ';
x += ' <Id>1</Id ';
x += ' <Name>Peter</Name ';
x += ' </Row ';
x += ' <Row ';
x += ' <Id>2</Id ';
x += ' <Name>John</Name ';
x += ' </Row ';
x += ' </Rows ';
x += '</MyData ';

x = x.replace(/<MyData>/ig,'<table border="1">');
x = x.replace(/<\/MyData>/ig,'</table>');
x = x.replace(/<Columns>|<Row>/ig,'<tr>');
x = x.replace(/<\/Columns>|<\/Row>/ig,'</tr>');
x = x.replace(/<Id>|<Name>/ig,'<td>');
x = x.replace(/<\/Id>|<\/Name>/ig,'</td>');
x = x.replace(/<Column>/ig,'<th>');
x = x.replace(/<\/Column>/ig,'</th>');
x = x.replace(/<Rows>|<\/Rows>/ig,'');

document.writeln(x)

--
Bart

[Tom Cole]

Use XSLT.

[pierre]

"Tom Cole" <tc****@gmail.coma écrit dans le message de news:
11**********************@i42g2000cwa.googlegroups. com...

Use XSLT.

I've looked in this direction... still, all browsers don't really seem to be
compliant with it (from what I quickly read).
Am I wrong ?

--
pierre

[Jeremy]

pierre wrote:

>Ajax? Well that does not really tell what code and APIs you use. If you
are using XMLHttpRequest then it already has XML parsing support for the
response the server sends built in, just make sure the server sends the
answer with an XML MIME type as the Content-Type header e.g.
Content-Type: application/xml
or
Content-Type: text/xml
and XMLHttpRequest parses the response body as XML and populates
requestObject.responseXML as an XML DOM document you can script with DOM
methods (DOM Level 2 Core and XML, some DOM Level 3 Core, DOM Level 3
XPath with Mozilla or with Opera 9, DOM Level 1 XML with IE/MSXML where
MSXML 3 and later support some MSXML specific stuff for XPath).

--

Martin Honnen
http://JavaScript.FAQTs.com/

In fact, I'm coding a web page in which the user can type a SQL query.
I send this query to a PHP script thanks to Ajax.
The PHP script sends XML content back.
The trouble is how to transform this XML content to a simple HTML table.

thanks,

I think that considering your data's schema, you would be better off
using JSON as the transport. JSON works easily in every browser that
supports XmlHttpRequest, unlike XML. Instead of messing with the DOM
tree of responseXML (as you would have to with XML), you can simply use
one line of code to turn your JSON data (from responseText) into an
array of Objects, and use much less code to generate your table using DOM.

For more information about JSON, go to <http://www.json.org- in
particular, check out the "PHP-JSON" link
(<http://www.aurore.net/projects/php-json/>), which provides a very fast
PHP extension that encodes any PHP variable, object, or array into a
JSON string with one call. Handy!

If you want to stick with XML, you may want to look at Google's
heavyweight "AJAXSLT" library: <http://goog-ajaxslt.sourceforge.net/-
I have never used it and am not vouching for it, but if you want to
reliably do XSLT from Javascript you're going to have to use a fairly
heavy library to do it.

Jeremy

[Tom Cole]

I think that considering your data's schema, you would be better off

using JSON as the transport. JSON works easily in every browser that
supports XmlHttpRequest, unlike XML. Instead of messing with the DOM
tree of responseXML (as you would have to with XML), you can simply use
one line of code to turn your JSON data (from responseText) into an
array of Objects, and use much less code to generate your table using DOM.

I agree that JSON might be easier, but he's already got XML coming from
his server. If you've got the option to provide JSON text output, you
may want to consider it. It's no harder then pumping out an XML file.

If you want to stick with XML, you may want to look at Google's
heavyweight "AJAXSLT" library: <http://goog-ajaxslt.sourceforge.net/-
I have never used it and am not vouching for it, but if you want to
reliably do XSLT from Javascript you're going to have to use a fairly
heavy library to do it.

How heavyweight is XSLTProcessor (non-IE) or Microsoft.XMLDOM (IE)?
Doesn't seem that cumbersome to me. I do something similar (you'd have
to hack at this code a bit but for your purposes, but)...

if (typeof XSLTProcessor != 'undefined') {
var processor = new XSLTProcessor();
var request = getXMLHttpRequest();
if (request) {
request.open("GET", url, false);
request.send(null);
var xsl = request.responseXML;
processor.importStylesheet(xsl);
var fragment = processor.transformToFragment(value, document);
if (element)
element.appendChild(fragment);
}
else {
return;
}
}
else {
var processor = new ActiveXObject("Microsoft.XMLDOM");
if (processor) {
processor.async = false;
processor.load(url);
var xmlString = value.transformNode(processor);
if (element)
element.innerHTML = xmlString;
}
else {
return;
}
}

[pierre]

"Tom Cole" <tc****@gmail.coma écrit dans le message de news:
11*********************@m73g2000cwd.googlegroups.c om...

>I think that considering your data's schema, you would be better off
using JSON as the transport. JSON works easily in every browser that
supports XmlHttpRequest, unlike XML. Instead of messing with the DOM
tree of responseXML (as you would have to with XML), you can simply use
one line of code to turn your JSON data (from responseText) into an
array of Objects, and use much less code to generate your table using
DOM.

I agree that JSON might be easier, but he's already got XML coming from
his server. If you've got the option to provide JSON text output, you
may want to consider it. It's no harder then pumping out an XML file.

>If you want to stick with XML, you may want to look at Google's
heavyweight "AJAXSLT" library: <http://goog-ajaxslt.sourceforge.net/-
I have never used it and am not vouching for it, but if you want to
reliably do XSLT from Javascript you're going to have to use a fairly
heavy library to do it.

How heavyweight is XSLTProcessor (non-IE) or Microsoft.XMLDOM (IE)?
Doesn't seem that cumbersome to me. I do something similar (you'd have
to hack at this code a bit but for your purposes, but)...

if (typeof XSLTProcessor != 'undefined') {
var processor = new XSLTProcessor();
var request = getXMLHttpRequest();
if (request) {
request.open("GET", url, false);
request.send(null);
var xsl = request.responseXML;
processor.importStylesheet(xsl);
var fragment = processor.transformToFragment(value, document);
if (element)
element.appendChild(fragment);
}
else {
return;
}
}
else {
var processor = new ActiveXObject("Microsoft.XMLDOM");
if (processor) {
processor.async = false;
processor.load(url);
var xmlString = value.transformNode(processor);
if (element)
element.innerHTML = xmlString;
}
else {
return;
}
}

thank you all for your response.
i think i'll use json.

--
pierre

[Martin Honnen]

Jeremy wrote:

I think that considering your data's schema, you would be better off
using JSON as the transport. JSON works easily in every browser that
supports XmlHttpRequest, unlike XML.

Which browser supports _XML_HttpRequest but does not support _XML_ in
your view?
--

Martin Honnen
http://JavaScript.FAQTs.com/