Pull Specific XML Node(s) Into HTML Document

January 03, 2023 Post a Comment

first time poster. Please be gentle. This topic may be similar to several other questions out there, but as far as I can see this is a unique problem I'm trying to solve. FWIW, I'

Solution 1:

Sounds like you are trying to do a transformation from XML to HTML. For this you can use a technology called XSLT but commonly known by many as an xslt transformation. You can use xslt in conjunction with xpath (query language for xml) to do exactly what you describe in your question.

Here is the xml: (added the div id's to the xml)

<?xml version="1.0" encoding="utf-8"?>
<section>
    <page>
        <div id="greenBackground"></div>
        <name image="image1.jpg">Section One</name>
        <copy>This is a description of section one.</copy>
    </page>
    <page>
        <div id="blueBackground"></div>
        <name image="image2.jpg">Section Two</name>
        <copy>This is a description of section two.</copy>
    </page>
</section>

Here is the xslt:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
    <body>
        <xsl:for-each select="section/page">
        <div>
            <xsl:attribute name="id">
                <xsl:value-of select="div//@id"/>
            </xsl:attribute>
            <h1>
                <xsl:value-of select="name"/>
            </h1>
            <p>
                <xsl:value-of select="copy"/>
            </p>
            <img>
                <xsl:attribute name="src">
                    <xsl:value-of select="name//@image"/>
                </xsl:attribute>
            </img>
            </div>
        </xsl:for-each>
    </body>
</html>
</xsl:template>
</xsl:stylesheet>

Here is the output after you run the tranform:

<html>
  <body>
    <div id="greenBackground">
      <h1>Section One</h1>
      <p>This is a description of section one.</p><img src="image1.jpg"></div>
    <div id="blueBackground">
      <h1>Section Two</h1>
      <p>This is a description of section two.</p><img src="image2.jpg"></div>
  </body>
</html>

Enjoy!

Solution 2:

Here's another version. I find it much cleaner if you:

avoid <xsl:for-each/> (using XSLT's pattern matching instead is more idiomatic)
use attribute value templates (these are the attribute="{..}")
you should also set <xsl:output/> since you're generating HTML (I have assumed 4.0)

I assume you can add an extra attribute id on your <page/> elements in the input (otherwise there's nowhere to get your id from!)

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" indent="yes"/>

<xsl:template match="/">
    <html>
        <body><xsl:apply-templates/></body>
    </html>
</xsl:template>

<xsl:template match="page">
    <div id="{@id}">
        <h1><xsl:value-of select="name"/></h1>
        <p><xsl:value-of select="copy"/></p>
        <img src="{name/@image}"/>
    </div>
</xsl:template>

</xsl:stylesheet>

Baca Juga

Solution 3:

Change your XML to this (to set the div id names):

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="web_page.xsl"?>
<section>
  <page>
    <div_id>greenBackground</div_id>
    <name image="image1.jpg">Section One</name>
    <copy>This is a description of section one.</copy>
  </page>
  <page>
    <div_id>blueBackground</div_id>
    <name image="image2.jpg">Section Two</name>
    <copy>This is a description of section two.</copy>
 </page>

This XSL will translate your XML just the way you asked:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
    <xsl:for-each select="section/page">
    <div>
      <xsl:attribute name="id">
        <xsl:value-of select="div_id"/>
      </xsl:attribute>
      <h1><xsl:value-of select="name"/></h1>
      <p><xsl:value-of select="copy"/></p>
      <img>
        <xsl:attribute name="src">
          <xsl:value-of select="name//@image"/>
        </xsl:attribute>
      </img>
    </div>
  </xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Solution 4:

This is how to get the transformation done with PHP:

$proc=new XsltProcessor;  
$proc->importStylesheet(DOMDocument::load("stylesheet.xsl"));  
echo $proc->transformToXML(DOMDocument::load("data.xml"));

Html5 Tutorial

Pull Specific XML Node(s) Into HTML Document

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Pull Specific XML Node(s) Into HTML Document"