Take information from the API and display in the HTML element

Question

Save, I’m starting with Javascript and how I remove the values returned by the API and display in an HTML element?

$(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;
}

Something like that:

<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>

Answer 1

The jquery text() method allows you to fill in the values.

$("#data").text(json["cidade"]["previsao"][0]["dia"]);
$("#tempo").text(json["cidade"]["previsao"][0]["tempo"]);
$("#max").text(json["cidade"]["previsao"][0]["maxima"]);
$("#min").text(json["cidade"]["previsao"][0]["minima"]);