# Safely passing XML string to Reactive HTML

**URL:** <https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797>\
**Category:** Panel\
**Created:** [September 13, 2021, 4:22am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797 "2021-09-13T04:22:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [September 13, 2021, 4:22am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/1 "2021-09-13T04:22:28Z")

</div>

Hi all,

I am having a xml that I need to pass it to Reactive HTML application. However, I am not pretty sure how to handle it correctly. I tried to decode xml `string` by using `DOMParser().parseFromString(input, "text/html")`, but there are some missing tags. As you can see in my xml below, it included `<b />` tag that will be incorrectly interpreted and already missing if you see from `console.log(data.xml)`.

Any suggestion for the best practice to deal with this xml string are greatly appreciated.

Thanks,  
Arifin

```auto
xml="""<?xml version="1.0" encoding="UTF-8" ?>
<CDXML
><colortable>
<color r="1" g="1" b="1"/>
<color r="0" g="0" b="0"/>
<color r="1" g="0" b="0"/>
<color r="1" g="1" b="0"/>
<color r="0" g="1" b="0"/>
<color r="0" g="1" b="1"/>
<color r="0" g="0" b="1"/>
<color r="1" g="0" b="1"/>
</colortable><fonttable>
<font id="24" charset="utf-8" name="Arial"/>
<font id="25" charset="utf-8" name="Times New Roman"/>
</fonttable><page
 id="6184"
 BoundingBox="0 0 776 333"
 Width="776"
 Height="333"
 HeaderPosition="36"
 FooterPosition="36"
 PageOverlap="0"
 PrintTrimMarks="yes"
 HeightPages="1"
 WidthPages="1"
 DrawingSpace="poster"
><fragment
 id="6168"
 BoundingBox="333.52 127.42 386.48 188.58"
 Z="36"
><n
 id="6165"
 p="334.02 143"
 Z="33"
 AS="N"
/><n
 id="6167"
 p="334.02 173"
 Z="35"
 AS="N"
/><n
 id="6169"
 p="360 188"
 Z="37"
 AS="N"
/><n
 id="6171"
 p="385.98 173"
 Z="39"
 AS="N"
/><n
 id="6173"
 p="385.98 143"
 Z="41"
 AS="N"
/><n
 id="6175"
 p="360 128"
 Z="43"
 AS="N"
/><b
 id="6177"
 Z="45"
 B="6165"
 E="6167"
 Order="2"
 BS="N"
 BondCircularOrdering="6182 0 0 6178"
/><b
 id="6178"
 Z="46"
 B="6167"
 E="6169"
 BS="N"
/><b
 id="6179"
 Z="47"
 B="6169"
 E="6171"
 Order="2"
 BS="N"
 BondCircularOrdering="6178 0 0 6180"
/><b
 id="6180"
 Z="48"
 B="6171"
 E="6173"
 BS="N"
/><b
 id="6181"
 Z="49"
 B="6173"
 E="6175"
 Order="2"
 BS="N"
 BondCircularOrdering="6180 0 0 6182"
/><b
 id="6182"
 Z="50"
 B="6175"
 E="6165"
 BS="N"
/></fragment></page></CDXML>"""

from panel.reactive import ReactiveHTML
import panel as pn
import param

class XmlReader(ReactiveHTML):
    
    xml = param.String(default='')
    
    _template = """
    <div id="container">
    </div>
    """
    
    _scripts = {
        'render': """
            function htmlDecode(input) {
              var doc = new DOMParser().parseFromString(input, "text/html");
              return doc.documentElement.textContent;
            }
            console.log(data.xml) 
            var decoded_xml = htmlDecode(data.xml)   
            console.log(decoded_xml) 
        """
    } 

xml_reader = XmlReader(xml=xml)
pn.extension()
xml_reader.servable()

```

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [September 13, 2021, 4:33am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/2 "2021-09-13T04:33:01Z")

</div>

Hi

I am not sure exactly what you are trying to achieve and why. Could you eleborate? That would help me help you 🙂

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [September 13, 2021, 4:45am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/3 "2021-09-13T04:45:48Z")

</div>

Hi Marc. I am trying to use ChemdrawJS with ReactiveHTML. I would like to read the cdxml string (the example is given above) and show the structures with ChemdrawJS. However, since it require the license, I am not pretty sure to elaborate.

Let me go a bit detail about it. While I pass the `data.xml` to the script, I got the error due to wrong format. I checked it by using `console.log` and I found a problem that we got the escape HTML format in `data.xml`. Therefore, I decoded it by the `htmlDecode` function. However, another problem is that `<b />` tags are missing which is related to the chemical bond information.

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [September 13, 2021, 4:48am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/4 "2021-09-13T04:48:12Z")

</div>

this is the code of `htmlDecode`

> <https://stackoverflow.com/questions/1912501/unescape-html-entities-in-javascript>

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [September 13, 2021, 4:51am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/5 "2021-09-13T04:51:01Z")

</div>

Before decoding (data.xml).

```auto
&lt;CDXML
&gt;&lt;colortable&gt;
&lt;color r="1" g="1" b="1"/&gt;
&lt;color r="0" g="0" b="0"/&gt;
&lt;color r="1" g="0" b="0"/&gt;
&lt;color r="1" g="1" b="0"/&gt;
&lt;color r="0" g="1" b="0"/&gt;
&lt;color r="0" g="1" b="1"/&gt;
&lt;color r="0" g="0" b="1"/&gt;
&lt;color r="1" g="0" b="1"/&gt;
&lt;/colortable&gt;&lt;fonttable&gt;
&lt;font id="24" charset="utf-8" name="Arial"/&gt;
&lt;font id="25" charset="utf-8" name="Times New Roman"/&gt;
&lt;/fonttable&gt;&lt;page
 id="6184"
 BoundingBox="0 0 776 333"
 Width="776"
 Height="333"
 HeaderPosition="36"
 FooterPosition="36"
 PageOverlap="0"
 PrintTrimMarks="yes"
 HeightPages="1"
 WidthPages="1"
 DrawingSpace="poster"
&gt;&lt;fragment
 id="6168"
 BoundingBox="333.52 127.42 386.48 188.58"
 Z="36"
&gt;&lt;n
 id="6165"
 p="334.02 143"
 Z="33"
 AS="N"
/&gt;&lt;n
 id="6167"
 p="334.02 173"
 Z="35"
 AS="N"
/&gt;&lt;n
 id="6169"
 p="360 188"
 Z="37"
 AS="N"
/&gt;&lt;n
 id="6171"
 p="385.98 173"
 Z="39"
 AS="N"
/&gt;&lt;n
 id="6173"
 p="385.98 143"
 Z="41"
 AS="N"
/&gt;&lt;n
 id="6175"
 p="360 128"
 Z="43"
 AS="N"
/&gt;<b><b><b><b><b><b>&lt;/fragment&gt;&lt;/page&gt;&lt;/CDXML&gt;</b></b></b></b></b></b>

```

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [September 13, 2021, 4:51am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/6 "2021-09-13T04:51:34Z")

</div>

After decoding with `htmlDecode` function.

```auto
<CDXML
><colortable>
<color r="1" g="1" b="1"/>
<color r="0" g="0" b="0"/>
<color r="1" g="0" b="0"/>
<color r="1" g="1" b="0"/>
<color r="0" g="1" b="0"/>
<color r="0" g="1" b="1"/>
<color r="0" g="0" b="1"/>
<color r="1" g="0" b="1"/>
</colortable><fonttable>
<font id="24" charset="utf-8" name="Arial"/>
<font id="25" charset="utf-8" name="Times New Roman"/>
</fonttable><page
 id="6184"
 BoundingBox="0 0 776 333"
 Width="776"
 Height="333"
 HeaderPosition="36"
 FooterPosition="36"
 PageOverlap="0"
 PrintTrimMarks="yes"
 HeightPages="1"
 WidthPages="1"
 DrawingSpace="poster"
><fragment
 id="6168"
 BoundingBox="333.52 127.42 386.48 188.58"
 Z="36"
><n
 id="6165"
 p="334.02 143"
 Z="33"
 AS="N"
/><n
 id="6167"
 p="334.02 173"
 Z="35"
 AS="N"
/><n
 id="6169"
 p="360 188"
 Z="37"
 AS="N"
/><n
 id="6171"
 p="385.98 173"
 Z="39"
 AS="N"
/><n
 id="6173"
 p="385.98 143"
 Z="41"
 AS="N"
/><n
 id="6175"
 p="360 128"
 Z="43"
 AS="N"
/></fragment></page></CDXML>

```

---

<div class="post-metadata">

**Author:** ![Marc](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/marc/32/24_2.png) [@Marc](https://discourse.holoviz.org/u/Marc)\
**Post date:** [September 13, 2021, 5:36am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/7 "2021-09-13T05:36:16Z")

</div>

Hi Arifin

I don’t understand the comment about `<b />` missing as I don’t see any `<b />` in your code??

Why don’t this work?

```python
xml="""
<CDXML
><colortable>
<color r="1" g="1" b="1"/>
<color r="0" g="0" b="0"/>
<color r="1" g="0" b="0"/>
<color r="1" g="1" b="0"/>
<color r="0" g="1" b="0"/>
<color r="0" g="1" b="1"/>
<color r="0" g="0" b="1"/>
<color r="1" g="0" b="1"/>
</colortable><fonttable>
<font id="24" charset="utf-8" name="Arial"/>
<font id="25" charset="utf-8" name="Times New Roman"/>
</fonttable><page
 id="6184"
 BoundingBox="0 0 776 333"
 Width="776"
 Height="333"
 HeaderPosition="36"
 FooterPosition="36"
 PageOverlap="0"
 PrintTrimMarks="yes"
 HeightPages="1"
 WidthPages="1"
 DrawingSpace="poster"
><fragment
 id="6168"
 BoundingBox="333.52 127.42 386.48 188.58"
 Z="36"
><n
 id="6165"
 p="334.02 143"
 Z="33"
 AS="N"
/><n
 id="6167"
 p="334.02 173"
 Z="35"
 AS="N"
/><n
 id="6169"
 p="360 188"
 Z="37"
 AS="N"
/><n
 id="6171"
 p="385.98 173"
 Z="39"
 AS="N"
/><n
 id="6173"
 p="385.98 143"
 Z="41"
 AS="N"
/><n
 id="6175"
 p="360 128"
 Z="43"
 AS="N"
/><b
 id="6177"
 Z="45"
 B="6165"
 E="6167"
 Order="2"
 BS="N"
 BondCircularOrdering="6182 0 0 6178"
/><b
 id="6178"
 Z="46"
 B="6167"
 E="6169"
 BS="N"
/><b
 id="6179"
 Z="47"
 B="6169"
 E="6171"
 Order="2"
 BS="N"
 BondCircularOrdering="6178 0 0 6180"
/><b
 id="6180"
 Z="48"
 B="6171"
 E="6173"
 BS="N"
/><b
 id="6181"
 Z="49"
 B="6173"
 E="6175"
 Order="2"
 BS="N"
 BondCircularOrdering="6180 0 0 6182"
/><b
 id="6182"
 Z="50"
 B="6175"
 E="6165"
 BS="N"
/></fragment></page></CDXML>"""

from panel.reactive import ReactiveHTML
import panel as pn
import param

class XmlReader(ReactiveHTML):

    xml = param.String(default='')

    _template = """
    <div id="my-element>hello</div>
    """

    _scripts = {
        'render': """
            var encodedStr = data.xml;

            var parser = new DOMParser;
            var dom = parser.parseFromString(
                '<!doctype html><body>' + encodedStr,
                'text/html');
            var decodedString = dom.body.textContent;

            console.log(decodedString);
        """
    }

xml_reader = XmlReader(xml=xml)
pn.extension()
xml_reader.servable()

```

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [September 13, 2021, 5:46am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/8 "2021-09-13T05:46:47Z")

</div>

> [@Marc](#):
>
> ```auto
> /><b
> id="6177"
> Z="45"
> B="6165"
> E="6167"
> Order="2"
> BS="N"
> BondCircularOrdering="6182 0 0 6178"
> /><b
> id="6178"
> Z="46"
> B="6167"
> E="6169"
> BS="N"
> /><b
> id="6179"
> Z="47"
> B="6169"
> E="6171"
> Order="2"
> BS="N"
> BondCircularOrdering="6178 0 0 6180"
> /><b
> id="6180"
> Z="48"
> B="6171"
> E="6173"
> BS="N"
> /><b
> id="6181"
> Z="49"
> B="6173"
> E="6175"
> Order="2"
> BS="N"
> BondCircularOrdering="6180 0 0 6182"
> /><b
> id="6182"
> Z="50"
> B="6175"
> E="6165"
> BS="N"
> /><b
> id="6182"
> Z="50"
> B="6175"
> E="6165"
> BS="N"
> /></fragment></page></CDXML>"""
> 
> ```

hi Marc, these 6 `<b />` are missing. As in your code, these block also not obtained. Before decoding, `data.xml` only has `<b><b><b><b><b><b>&lt;/fragment&gt;&lt;/page&gt;&lt;/CDXML&gt;</b></b></b></b></b></b>` at the end. the information of `<b />` also gone. I think it is because `<b />` is used for bold in HTML.

---

<div class="post-metadata">

**Author:** ![Arifin](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/arifin/32/2194_2.png) [@Arifin](https://discourse.holoviz.org/u/Arifin)\
**Post date:** [September 13, 2021, 8:30am UTC](https://discourse.holoviz.org/t/safely-passing-xml-string-to-reactive-html/2797/9 "2021-09-13T08:30:04Z")

</div>

I think this is not the best solution, but this could be work. I am passing json string and change it back into xml with js.

```auto
import xmltodict, json
from panel.reactive import ReactiveHTML
import panel as pn
import param

o = xmltodict.parse(xml)
json_text=json.dumps(o)

class XmlReader(ReactiveHTML):
    
    xml = param.String(default='')
    
    _template = """
    <div id="container">
    </div>
    """
    
    _scripts = {
        'render': """
            var data = data.xml
            var jsonObj = JSON.parse(data); 
            var xml = json2xml(jsonObj)
            console.log(xml) 
        """
    } 

    __javascript__ ={
        'http://goessner.net/download/prj/jsonxml/json2xml.js',
    }
xml_reader = XmlReader(xml=json_text)
pn.extension()
xml_reader.servable()

```