Salve, estou começando com JavaScript e como eu retiro os valores retornados pela API e exibo em um elemento HTML?
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://servicos.cptec.inpe.br/XML/cidade/7dias/244/previsao.xml",
cache: false,
dataType: "xml",
success: function(xml) {
// xml retornado
console.log('xml retornado', xml);
// convertendo para json
json = xmlToJson(xml);
console.log('json completo', json);
// acessando array de previsões
console.log('previsões', json.cidade.previsao);
}
});
});
// from https://gist.github.com/chinchang/8106a82c56ad007e27b1
function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType == 1) { // element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) { // text
obj = xml.nodeValue;
}
// do children
// If just one text node inside
if (xml.hasChildNodes() && xml.childNodes.length === 1 && xml.childNodes[0].nodeType === 3) {
obj = xml.childNodes[0].nodeValue;
} else if (xml.hasChildNodes()) {
for (var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof(obj[nodeName]) == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof(obj[nodeName].push) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
}
Algo assim:
<ul>
<li>Data: <span id="data">xx</span></li>
<li>Tempo: <span id="tempo">xx</span></li>
<li>Máxima: <span id="max">xx</span></li>
<li>Mínima: <span id="min">xx</span></li>
</ul>