I'm using Ajax/jQuery to pull in some content from an RSS feed, but it seems to be failing to read the content of an XML node with the name 'link'.
Here's a simplified version of the XML:
<?xml version="1.0" encoding="UTF-8"?>
<channel>
<item>
<title>Title one</title>
<link>https://example.com/</link>
<pubDate>Mon, 12 Feb 2019</pubDate>
</item>
<item>...</item>
<item>...</item>
</channel>
</xml>
And the code I'm using:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('item', this.responseText).each(function(){
var thisPostData = {};
thisPostData.title = $(this).find('title').text();
thisPostData.link = $(this).find('link').text();
thisPostData.date = $(this).find('pubDate').text();
posts.push(thisPostData);
});
console.log(posts);
}
};
var posts = [];
xhttp.open('GET', 'https://example.com/rssfeed/', true);
xhttp.send();
You'll see I'm trying to add each 'item' to an object, and storing them inside the 'posts' array. 'Title' and 'pubDate' are stored fine but 'link' isn't.
The actual RSS feed in question contains a huge amount of extra data, all of which I can read except the 'link' nodes. Any suggestions why nodes called 'link' would act differently from all the others?
The problem is because you're attempting to parse XML as HTML. The <link> object in HTML is an inline element, not a block level one, so it has no textContent property for jQuery to read, hence the output is empty.
To fix this first read the XML using $.parseXML(), then put it in a jQuery object which you can traverse.
There's also a couple of things to note. Firstly you will need to remove the </xml> node at the end of the XML output as it's invalid and will cause an error when run through $.parseXML. Secondly you can use map() to build an array instead of manually calling push() on an array, and you can just return the object definition directly from that. Try this:
var responseText = '<?xml version="1.0" encoding="UTF-8"?><channel><item><title>Title one</title><link>https://example.com/</link><pubDate>Mon, 12 Feb 2019</pubDate></item><item><title>Title two</title><link>https://foo.com/</link><pubDate>Tue, 13 Feb 2019</pubDate></item></channel>';
var xmlDoc = $.parseXML(responseText)
var posts = $('item', xmlDoc).map(function() {
var $item = $(this);
return {
title: $item.find('title').text(),
link: $item.find('link').text(),
date: $item.find('pubDate').text()
};
}).get();
console.log(posts);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Lastly, you're using a rather odd mix of JS and jQuery. I'd suggest going with one or the other. As such, here's a full jQuery implementation with the AJAX request included too:
$.ajax({
url: 'https://example.com/rssfeed/',
success: function(responseText) {
var xmlDoc = $.parseXML(responseText)
var posts = $('item', xmlDoc).map(function() {
var $item = $(this);
return {
title: $item.find('title').text(),
link: $item.find('link').text(),
date: $item.find('pubDate').text()
};
}).get();
// work with posts here...
}
});
I want to consume the following soap url:
http://89.221.253.174:8080/OpenClinica-ws/ws/data/v1/dataWsdl.wsdl
I am using google pass script and my code looks as below:
var xml =
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
+"<soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:v1=\"http://openclinica.org/ws/studySubject/v1\" xmlns:bean=\"http://openclinica.org/ws/beans\">"
+"<soapenv:Header>"
+"<wsse:Security soapenv:mustUnderstand=\"1\" xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">"
+"<wsse:UsernameToken wsu:Id=\"UsernameToken-27777511\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">"
+"<wsse:Username>x</wsse:Username>"
+"<wsse:Password>y</wsse:Password>"
+"</wsse:UsernameToken>"
+"</wsse:Security>"
+"</soapenv:Header>"
+"<soapenv:Body>"
+"<v1:importRequest>"
+"<ODM>"
+"<ClinicalData StudyOID=\"S_PROSPER2\" MetaDataVersionOID=\"v1.0.0\">"
+"<SubjectData SubjectKey=\"SS_UU001\">"
+"<StudyEventData StudyEventOID=\"SE_QUESW4\" StudyEventRepeatKey=\"0\">"
+"<FormData FormOID=\"F_RANDANDQUEST_11\">"
+"<ItemGroupData ItemGroupOID=\"IG_RANDA_UNGROUPED\" ItemGroupRepeatKey=\"1\" TransactionType=\"Insert\">"
+"<ItemData ItemOID=\"I_RANDA_RAND01\" Value=\"1\"/>"
+"<ItemData ItemOID=\"I_RANDA_RAND02\" Value=\"1\"/>"
+"<ItemData ItemOID=\"I_RANDA_RAND03\" Value=\"1\"/>"
+"<ItemData ItemOID=\"I_RANDA_RAND04\" Value=\"1\"/>"
+"</ItemGroupData>"
+"</FormData>"
+"</StudyEventData>"
+"</SubjectData>"
+"</ClinicalData>"
+"</ODM>"
+"</v1:importRequest>"
+"</soapenv:Body>"
+"</soapenv:Envelope>";
var options =
{
"method" : "post",
"contentType" : "text/xml; charset=utf-8",
"payload" : xml
};
var result = UrlFetchApp.fetch("http://89.221.253.174:8080/OpenClinica-ws/ws/data/v1/dataWsdl.wsdl", options);
Logger.log(result);
I don't know actually what is the error on here, what does 404 means in this case? Seems like I am communicating with the server but something else is missing.
Any idea what would be wrong in here?
PS: The same code works just fine using soapUI.
solved it by puting all the xml in one line this way:
var xml = "<soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:v1=\"http://openclinica.org/ws/data/v1\"><soapenv:Header><wsse:Security soapenv:mustUnderstand=\"1\" xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\"><wsse:UsernameToken wsu:Id=\"UsernameToken-27777511\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\"><wsse:Username>x</wsse:Username><wsse:Password>y</wsse:Password></wsse:UsernameToken></wsse:Security></soapenv:Header><soapenv:Body><v1:importRequest><ODM><ClinicalData StudyOID=\"S_PROSPER2\" MetaDataVersionOID=\"v1.3.0\"><SubjectData SubjectKey=\"SS_UU001\"><StudyEventData StudyEventOID=\"SE_QUESW4\" StudyEventRepeatKey=\"0\"><FormData FormOID=\"F_RANDANDQUEST_11\"><ItemGroupData ItemGroupOID=\"IG_RANDA_UNGROUPED\" ItemGroupRepeatKey=\"1\" TransactionType=\"Insert\"><ItemData ItemOID=\"I_RANDA_RAND01\" Value=\"1\"/></ItemGroupData></FormData></StudyEventData></SubjectData></ClinicalData></ODM></v1:importRequest></soapenv:Body></soapenv:Envelope>";
I have no idea why is this way it works, but it is working!
I am trying to parse xml data with javascript in ajax call.But responseXML is returning null value.Here is my code
<script language="javascript">
if(window.addEventListener)
{
window.addEventListener("load",getXML,false);
}
else if(window.attachEvent)
{
window.attachEvent("onload",getXML);
}
function getXML()
{
var xhr = new XMLHttpRequest();
xhr.open("GET","myxml.xml",true);
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
//alert("got response");
var root = xhr.responseXML;
alert(root);
}
}
xhr.send(null);
}
</script>
Here is my "myxml.xml" file
<?xml version="1.0" encoding="iso-8859-1"?>
<root>
<child-1>
<grandChild1_1>textOfGrandChild1_1</grandchild1_1>
<grandChild2_1>textOfGrandChild2_1</grandchild2_1>
<grandChild3_1>textOfGrandChild3_1</grandchild3_1>
</child-1>
<child-2>
<grandChild1_2>textOfGrandChild1_2</grandchild1_2>
<grandChild2_2>textOfGrandChild2_2</grandchild2_2>
<grandChild3_2>textOfGrandChild3_2</grandchild3_2>
</child-2>
<child-3>
<grandChild1_3>textOfGrandChild1_3</grandchild1_3>
<grandChild2_3>textOfGrandChild2_3</grandchild2_3>
<grandChild3_3>textOfGrandChild3_3</grandchild3_3>
</child-3>
</root>
When I tried with
alert(xhr.responseText)
it showed the xml file as it is.But when using responseXML it is giving null value.Where is the problem?
Your XML is invalid, Case matters
<grandChild1_1>textOfGrandChild1_1</grandchild1_1>
^ ^
All the closing tags have the wrong camel case in the names.
Your XML was incorrect, beacuse it is case sensitive, changed grandchild1_1 to grandChild1_1 and it worked.
<?xml version="1.0" encoding="iso-8859-1"?>
<root>
<child-1>
<grandChild1_1>textOfGrandChild1_1</grandChild1_1>
<grandChild2_1>textOfGrandChild2_1</grandChild2_1>
<grandChild3_1>textOfGrandChild3_1</grandChild3_1>
</child-1>
<child-2>
<grandChild1_2>textOfGrandChild1_2</grandChild1_2>
<grandChild2_2>textOfGrandChild2_2</grandChild2_2>
<grandChild3_2>textOfGrandChild3_2</grandChild3_2>
</child-2>
<child-3>
<grandChild1_3>textOfGrandChild1_3</grandChild1_3>
<grandChild2_3>textOfGrandChild2_3</grandChild2_3>
<grandChild3_3>textOfGrandChild3_3</grandChild3_3>
</child-3>
Here is the Plunker
Thanks!
This is related to another question, but is not a duplicate.
It deals with a proposed solution that I have reached an impasse.
I have the following code that reads an XML, makes changes, opens a window, and writes the XML into the document. The problem is that the content is not rendered as XML.
Any way to set a content type, etc, to have the browser handle the content as XML?
<script>
var wxml;
var xDoc;
var xDevices, xInputs;
var xDevice, xInput;
function fSetXmlAInput(iDevice, iNode, nodeNewVal) {
xInput = xInputs[iNode];
xValue = xInput.getElementsByTagName("value")[0];
// change node value:
// console.log("nodeVal: " + xValue.firstChild.nodeValue);
xValue.firstChild.nodeValue = nodeNewVal;
// console.log("newVal: " + xValue.firstChild.nodeValue);
}
function fSetXmlDevice(iDevice) {
xDevice = xDevices[iDevice];
xInputs = xDevice.getElementsByTagName("input");
fSetXmlAInput(iDevice, 0, "22");
fSetXmlAInput(iDevice, 1, "33");
}
function alternativeLoadXML3() {
// load xml file
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "my_template.xml", false);
xhttp.send();
xDoc = xhttp.responseXML;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
var xmlText = serializeXmlNode(xDoc);
var newWindow = window.open("my_template.xml", "Test", "width=300,height=300,scrollbars=1,resizable=1");
newWindow.document.open();
newWindow.document.write(xmlText);
newWindow.document.close()
};
</script>
Below the XML as well:
<?xml version="1.0" encoding="utf-8"?>
<myXmlRoot>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
</myXmlRoot>
Any way to force the browser to render content in new window as XML...or does using document.open and document.write mean code is rendered as HTML?
Related: Change XML content using JavaScript, missing refresh
Use dataURI to write xml into new window is very easy.
window.open('data:text/xml,'+encodeURIComponent(xmlText),
"Test", "width=300,height=300,scrollbars=1,resizable=1");
Both document.open and document.write are used to write HTML or Javascript to a document. This goes back to the DOM Level 2 Specification of document.open, which assumes that the document is opened in order to write unparsed HTML.
Instead of using document.open and document.write, I would instead suggest dymanically adding elements using the XML DOM as in sampleElement.appendChild(XMLnode)
A similar question can also be found here: how to display xml in javascript?
This is a question in relation to this one.
In UPDATE II, I added a script based on Jamie's feedback.
UPDATE - tl;dr:
I created a fiddle with a temporary key so you guys can see the problem more easily: http://jsfiddle.net/S6wEN/.
As this question was getting too long, this is a summary.
I tried to use imgur API to update an image via cross domain XHR.
In order to abstract details in the implementation, I'm using Jquery Form Plugin (obviously, it's contained in the fiddle).
Works great in Chrome, Firefox, etc but it doesn't work in IE9.
The expected result is to update the image and retrieve image type.
You can still find the details below.
Thanks
I have this HTML:
<body>
<form id="uploadForm" action="http://api.imgur.com/2/upload.xml" method="POST" enctype="multipart/form-data">
<input type="hidden" name="key" value="MYKEY">
File: <input type="file" name="image">
Return Type: <select id="uploadResponseType" name="mimetype">
<option value="xml">xml</option>
</select>
<input type="submit" value="Submit 1" name="uploadSubmitter1">
</form>
<div id="uploadOutput"></div>
</body>
So basically, I have a form to upload an image to imgur via cross domain XHR. In order to manage the nasty details, I'm using Jquery Form Plugin, which works well. However, when I try to send an image to imgur and receive an xml response, it doesn't work as expected in IE9 (I haven't tested in IE8 but I don't expect great news). It works great in Chrome and Firefox. This is the javascript part:
(function() {
$('#uploadForm').ajaxForm({
beforeSubmit: function(a,f,o) {
o.dataType = $('#uploadResponseType')[0].value;
$('#uploadOutput').html('Submitting...');
},
complete: function(data) {
var xmlDoc = $.parseXML( data.responseText ),
$xml = $( xmlDoc );
$('#uploadOutput').html($xml.find('type'));
}
});
})();
In IE9 I receive the following errors:
SCRIPT5022: Invalid XML: null
jquery.min.js, line 2 character 10890
XML5619: Incorrect document syntax.
, line 1 character 1
I also used the example given in Jquery Form Plugin's page, which uses only Javascript but it doesn't help. Obviously, the first error referring to Jquery disappears but I can't obtain the expected results (in this case, image/jpeg in the div with id="uploadOutput" ).
When I look at the console in IE9, I get this:
URL Method Result Type Received Taken Initiator Wait Start Request Response Cache read Gap
http://api.imgur.com/2/upload.xml POST 200 application/xml 1.07 KB 7.89 s click 2808 93 5351 0 0 0
and as body response:
<?xml version="1.0" encoding="utf-8"?>
<upload><image><name/><title/><caption/><hash>xMCdD</hash>
<deletehash>Nb7Pvf3zPNohmkQ</deletehash><datetime>2012-03-17 01:15:22</datetime>
<type>image/jpeg</type><animated>false</animated><width>1024</width
<height>768</height><size>208053</size><views>0</views><bandwidth>0</bandwidth></image
<links><original>http://i.imgur.com/xMCdD.jpg</original
<imgur_page>http://imgur.com/xMCdD</imgur_page>
<delete_page>http://imgur.com/delete/Nb7Pvf3zPNohmkQ</delete_page>
<small_square>http://i.imgur.com/xMCdDs.jpg</small_square>
<large_thumbnail>http://i.imgur.com/xMCdDl.jpg</large_thumbnail></links></upload>
which is all fine, but for some reason, I can't process that information into the HTML page. I validated the XML, just to be sure that wasn't the problem. It is valid, of course.
So, what's the problem with IE9?.
UPDATE:
Another way to fetch XML which works in Chrome and Firefox but not in IE9:
(function() {
$('#uploadForm').ajaxForm({
dataType: "xml",
beforeSubmit: function(a,f,o) {
o.dataType = $('#uploadResponseType')[0].value;
$('#uploadOutput').html('Submitting...');
},
success: function(data) {
var $xml = $( data ),
element = $($xml).find('type').text();
alert(element);
}
});
})();
UPDATE 2:
<!DOCTYPE html>
<html>
<body>
<form id="uploadForm" action="http://api.imgur.com/2/upload.xml" method="POST" enctype="multipart/form-data">
<input type="hidden" name="key" value="00ced2f13cf6435ae8faec5d498cbbfe">
File: <input type="file" name="image">
Return Type: <select id="uploadResponseType" name="mimetype">
<option value="xml">xml</option>
</select>
<input type="submit" value="Submit 1" name="uploadSubmitter1">
</form>
<div id="uploadOutput"></div>
</body>
</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
(function() {
var options = {
// target: '#output1', // target element(s) to be updated with server response
//beforeSubmit: showRequest, // pre-submit callback
success: afterSuccess, // post-submit callback
complete: afterCompletion,
// other available options:
//url: url // override for form's 'action' attribute
type: 'POST', // 'get' or 'post', override for form's 'method' attribute
dataType: 'xml' // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
function process_xml(xml) {
var type = $(xml).find('type').text() ;
return type;
// Find other elements and add them to your document
}
function afterSuccess(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
var $xml = process_xml(responseText);
console.log('success: ' + $xml);
}
function afterCompletion(xhr,status){
if(status == 'parsererror'){
xmlDoc = null;
// Create the XML document from the responseText string
if(window.DOMParser) {
parser = new DOMParser();
xml = parser.parseFromString(xhr.responseText,"text/xml");
} else {
// Internet Explorer
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(xhr.responseText);
}
}
console.log('complete: ' + process_xml(xhr.responseText));
}
$('#uploadForm').ajaxForm(options);
})();
</script>
Thanks in advance.
IE is notoriously fussy when it comes to accepting XML and parsing it. Try something like this:
function process_xml(xml) {
var type = $(xml).find('type').text() ;
$('#type').html(type) ;
// Find other elements and add them to your document
}
$(function() {
$('#uploadForm').ajaxForm({
dataType: "xml", // 'xml' passes it through the browser's xml parser
success: function(xml,status) {
// The SUCCESS EVENT means that the xml document
// came down from the server AND got parsed successfully
// using the browser's own xml parsing caps.
process_xml(xml);
// Everything goes wrong for Internet Explorer
// when the mime-type isn't explicitly text/xml.
// If you are missing the text/xml header
// apparently the xml parse fails,
// and in IE you don't get to execute this function AT ALL.
},
complete: function(xhr,status){
if(status == 'parsererror'){
xmlDoc = null;
// Create the XML document from the responseText string
if(window.DOMParser) {
parser = new DOMParser();
xml = parser.parseFromString(xhr.responseText,"text/xml");
} else {
// Internet Explorer
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(xhr.responseText);
}
process_xml(xml);
}
},
error: function(xhr,status,error)
{
alert('ERROR: ' + status) ;
alert(xhr.responseText) ;
}
});
});
Also,use alert() throughout debugging to provide feedback on what information is being passed through at all times.
EDIT
The crucial thing is ensure your XML file is 'well-formed', i.e. it must not contain any syntax errors. You need to begin the XML file with:
<?xml version="1.0"?>
It's not so much a server issue because, the errors come from your browser (i.e. Internet Explorer) because it thinks the XML is malformed. The error comes from your browser and indicates that your XML is malformed. You can manually set what headers you want returned with these $.ajax() settings:
dataType: ($.browser.msie) ? "text" : "xml",
accepts: {
xml: "text/xml",
text: "text/xml"
}
Or another way to do the same thing is to ask for a particular header:
headers: {Accept: "text/xml"},
The difference between the content-types application/xml and text/xml are minor (it's based on each XML's charset), but if you want to know you can read this post.
Perhaps give this a try? I use this with a google maps store locator. I notice $.parseXML actually does this internally, but its within a try/catch, and its saying your data is null (which is weird?)
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
From jQuery:
// Cross-browser xml parsing
parseXML: function( data ) {
var xml, tmp;
try {
if ( window.DOMParser ) { // Standard
tmp = new DOMParser();
xml = tmp.parseFromString( data , "text/xml" );
} else { // IE
xml = new ActiveXObject( "Microsoft.XMLDOM" );
xml.async = "false";
xml.loadXML( data );
}
} catch( e ) {
xml = undefined;
}
if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
jQuery.error( "Invalid XML: " + data );
}
return xml;
},
I have used that plugin before. If I recall this right it is using an iframe to fetch the information and then it is reading the content in the iframe. The content is stored in the property responseText. But IE may have stricter rules than other browsers. Have you tried printing out the value of data.responseText?
If the value is not a XML string. I hate to say it but the API isn't made for Javascript. What I've learned is that JSONP with manipulating the script tags is the best way to do cross domain XHR. Which I don't think this plugin does.
demo: http://bit.ly/HondPC
js code:
$(function() {
$('#uploadForm').ajaxForm({
dataType : 'xml', // OR $('#uploadResponseType option:selected').val()
beforeSubmit : function(a, f, o) {
$('#uploadOutput').html('Submitting...');
},
success : function(data) {
var original = $(data).find('links').find('original').text();
$('#uploadOutput').html('<img src="' + original + '" alt="" />');
}
});
});
php code:
<?
$api_key = "****************************";
$file = getcwd() . '/' . basename( $_FILES['image']['name'] );
move_uploaded_file($_FILES['image']['tmp_name'], $file);
$handle = fopen($file, "r");
$data = fread($handle, filesize($file));
$pvars = array('image' => base64_encode($data), 'key' => $api_key);
$post = http_build_query($pvars);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, 'http://api.imgur.com/2/upload.xml');
curl_setopt($curl, CURLOPT_TIMEOUT, 30);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
curl_setopt($curl, CURLOPT_HTTPHEADER, array("Content-type: application/x-www-form-urlencoded"));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$xml = curl_exec($curl);
curl_close ($curl);
unlink($file);
header('Content-type: text/xml');
echo $xml;
?>