Having trouble parsig xmlusing ajax. Can't seem to see what's going wrong here, as I have been able to retrieve API's using ajaxelsewhere in my code. Any help would be greatly appreciated.
html:
<div id="technology" class="tab-pane fade">
<h3>TECH</h3>
<p id="tech_news"></p>
</div>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://feeds.bbci.co.uk/news/technology/rss.xml",
dataType: "xml",
cache: false,
success: parseXml
});
});
function parseXml(xml) {
$(xml).find("item").each(function() {
$("#tech_news").append($(this).find("title").text() + "<p>");
$("#tech_news").append($(this).find("description").text() + "<p>");
});
}
Actually you have a corsissue. We have this error message:
Failed to load http://feeds.bbci.co.uk/news/technology/rss.xml?_=1511718738881:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access
.
However you can use this service https://crossorigin.me/ to allow cross origins requests through ajax.
Something like this:
$(document).ready(function() {
$.ajax({
type: "GET",
url: "https://crossorigin.me/http://feeds.bbci.co.uk/news/technology/rss.xml",
dataType: "xml",
cache: false,
success: parseXml
});
});
function parseXml(xml) {
$(xml).find("item").each(function() {
$("#tech_news").append($(this).find("title").text() + "<p>");
$("#tech_news").append($(this).find("description").text() + "<p>");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="technology" class="tab-pane fade">
<h3>TECH</h3>
<p id="tech_news"></p>
</div>
Even so, you should know that it is an external service that may not be operational 24/7.
</div>