I want to parse OpenSearch XML to get a url for search like "http://stackoverflow.com/search?q={searchTerms}"
the XML is like this:
<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>Stack Overflow</ShortName>
<Description>Search Stack Overflow: Q&A for professional and enthusiast programmers</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">http://sstatic.net/stackoverflow/img/favicon.ico</Image>
<Url type="text/html" method="get" template="http://stackoverflow.com/search?q={searchTerms}"></Url>
</OpenSearchDescription>
var domParser = new DOMParser,
dom = domParser.parseFromString(xml, "application/xml");
console.log( dom.getElementsByTagName("Url")[0].getAttribute("template"));
//"http://stackoverflow.com/search?q={searchTerms}"
Just let the XmlHttpRequest do the work? I'm quite sure you don't get the XML as a string.
var dom = xhr.responseXML;
var url = dom.documentElement.querySelector("Url[template]"); // DOM lvl 3!
if (url)
return url.getAttribute("template");
Related
I have one sample XML & XSL resource. I am getting XML as a string from API call in javascript. While XSLT is present as a static resource on the server. My goal is to display XML content along with stylesheet in HTML document element.
I do not want to use XSLTProcessor for now. I would like to try the browser way. And yes both the XML and XSLT would be coming from the same server.
Code:
import XSL from '#salesforce/resourceUrl/Roles';
export default class DisplayReport extends LightningElement {
renderedCallback(){
var xml = '<root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>';
var output = '<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="'+XSL+'" ?>'+xml;
console.log(output); //output on below line
//<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="/assets/project/b481ca5a6f/staticresources/Roles" ?><root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>
var xmlNode = this.parseXml(output);
console.log(xmlNode);
const element = this.template.querySelector('div.dms');
element.appendChild(xmlNode.documentElement);
}
parseXml(xmlStr){
if (window.DOMParser) {
return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
}
}
}
Markup:
<template>
<div class="dms" lwc:dom="manual">
</div>
</template>
Output: (no style sheet getting applied)
one 1 2 two
Any idea what is missing here?
I am parsing XML via libxmljs2 and then trying to add an extra element, see example below.
var x = require('libxmljs2');
var xmlDoc = x.parseXmlString(`<?xml version="1.0" encoding="UTF-8"?>
<ns:FOO xmlns:ns=“example ns" xmlns:ns2="example ns 2”>
<ns:A>
<ns2:X>TEXT</ns2:X>
</ns:A>
<ns:B>
<ns2:Y>TEXT</ns2:Y>
<ns2:Z>TEXT</ns2:Z>
<ns2:P>TEXT</ns2:P>
</ns:B>
</ns:FOO>`)
What i want is to make it like:
<?xml version="1.0" encoding="UTF-8"?>
<ns:FOO xmlns:ns=“example ns" xmlns:ns2="example ns 2">
<NEW-ELEMENT>
<NEW-SUB-ELEMENT>
<ANOTHER-NEW-SUB-ELEMENT>TEXT</ANOTHER-NEW-SUB-ELEMENT>
<NEW-SUB-ELEMENT>
</NEW-ELEMENT>
<ns:A>
<ns2:X>TEXT</ns2:X>
</ns:A>
<ns:B>
<ns2:Y>TEXT</ns2:Y>
<ns2:Z>TEXT</ns2:Z>
<ns2:P>TEXT</ns2:P>
</ns:B>
</ns:FOO>
This is what I am trying to do:
const reqNode = xmlDoc.get('//ns:FOO', { FOO: 'example'})
const doc = new x.Document();
doc
.node('NEW-ELEMENT')
.node('Service', "TI")
.parent()
.node('NEW-SUB-ELEMENT')
.node('ANOTHER-NEW-SUB-ELEMENT', 'TEXT')
.parent()
.parent().toString()
reqNode.addChild(doc)
However it seems to make it like:
<?xml version="1.0" encoding="UTF-8"?>
<ns:FOO xmlns:ns=“example ns" xmlns:ns2="example ns 2">
<ns:A>
<ns2:X>TEXT</ns2:X>
</ns:A>
<ns:B>
<ns2:Y>TEXT</ns2:Y>
<ns2:Z>TEXT</ns2:Z>
<ns2:P>TEXT</ns2:P>
</ns:B>
<NEW-ELEMENT>
<NEW-SUB-ELEMENT>
<ANOTHER-NEW-SUB-ELEMENT>TEXT</ANOTHER-NEW-SUB-ELEMENT>
<NEW-SUB-ELEMENT>
</NEW-ELEMENT>
</ns:FOO>
Any ideas, where I'm doing wrong?
Much appreciated
node(...) always adds the node at the end. If you want to insert an element elsewhere you can use addPrevSibling(siblingNode) to insert a node before the Element that was called on. So here you would first find the ns:A Element and then call that function on it (you probably have to construct the child element explicitly so it can be passed as an argument).
I want to getElementsByTagName in xml file.
It is my code(.html).
<html>
<header>
<title>Read XML</title>
</header>
<body>
<h1>Hello My Application</h1>
<script type="text/javascript">
function readXML()
{
var xml= new XMLHttpRequest();
xml.open('GET', 'C:\Users\xxx\Testxml.xml');
//xml.send();
var xmlData = xml.responseText;
if(!xmlData)
{
xmlData = (new DOMParser()).parseFromString(xml.responseText, 'text/xml');
var emp = xmlData.getElementsByTagName("employee");
var name= emp[0].getElementsByTagName("name")[0].firstChild.data;
document.write("Name = " + name);
}
}
</script>
<button onclick="readXML()">Read XML File</button>
</body>
</html>
I run filename.html but there is error on line var name= emp[0].getElementsByTagName("name")[0].firstChild.data;
It is my xml file.
<company>
<employee>
<name>Chrish</name>
<age>40</age>
<salary>100</salary>
</employee>
</company>
Could you help me please?
Have you tried logging your xmlData variable to see if you are actually able to read the xml file? Because, as far as I know, reading local xml files in javascript is not allowed directly. You can try reading it through the File API. Read more about it here.
And secondly, your if condition seems incorrect. You are checking for (!xmlData) which means it will run when xmlData is empty while it should be running when you are actually able to get data in xmlData variable.
If I have an empty XSL doc as follows:
<body>
<div id="myList">
</div>
</body>
How can I access the div tag and append XSL to it? For example, I want to do the following in my js code but it doesn't output anything. But if I manually insert the innerHTML value into the div tag it works:
document.getElementById("myList").innerHTML = `<xsl:value-of select="Movies/Authors/FirstName"/>`
I've tried using different quote styles but I can't seem to get the expected output. Is there any way around this?
Assuming you have an XSLT stylesheet as an XML DOM document and a recent version of a browser supporting innerHTML on XML elements (I have tested successfully with current versions of Chrome, Firefox and Edge on Windows 10 Creators Update) you can use e.g.
var xslString = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="Root">
<div id="myList">
</div>
</xsl:template>
</xsl:stylesheet>`;
var xmlString = `<Root>
<Movies>
<Authors>
<FirstName>Steven</FirstName>
</Authors>
</Movies>
</Root>`;
var domParser = new DOMParser();
var xsltDoc = domParser.parseFromString(xslString, 'application/xml');
var xmlDoc = domParser.parseFromString(xmlString, 'application/xml');
var div = xsltDoc.querySelector('#myList');
div.innerHTML = `<xsl:value-of select="Movies/Authors/FirstName"/>`;
var proc = new XSLTProcessor();
proc.importStylesheet(xsltDoc);
document.getElementById('result').appendChild(proc.transformToFragment(xmlDoc, document));
<section>
<h1>Result</h1>
<div id="result"></div>
</section>
This is my exact xml file:
<?xml version="1.0" ?>
<blah_de_blah>
<unblocker_details table_color="#F2F0FF" type="zip" alt_link="http://g.org/288"
link_for_deletion="3-QQ5DJoa-AWFT7a9" comment="zippy" />
<unblocker_details table_color="#FFFFFF" type="Webpage" alt_link="http://www.gg.com"
link_for_deletion="4-rOX2brr-2qQeGY3" comment="test" />
</blah_de_blah>
I have successfully gotten it via an ajax request, then did this:
var xmlDoc=null;
var parser = new DOMParser();
xmlDoc = parser.parseFromString(data, "text/xml");
and now I need to get each of those values from unblocker_details into a variable:
for example:
the_table_color=table_color;
the_type =type;
etc
Please also check if I declared the xml properly as I am very new to this.
Thanks!
Something like this:
var nodes = xmlDoc.getElementsByTagName("unblocker_details");
for(i=0; i< nodes.length; i++) {
the_table_color = nodes[i].getAttribute("table_color");
// get other attributes the same way
}
You can use this http://www.w3schools.com/ajax/ajax_xmlfile.asp