Puis-je réduire ce code avec un tableau ou une boucle ?

Question

Pardonnez-moi, j'espère que cette question n'est pas trop évidente, je suis un noob de javascript.

J'ai un code javascript qui prend des chiffres d'une feuille xml et les affiche dans des éléments td sur une page html. Cela fonctionne mais je pense que cela pourrait être condensé dans un tableau ou une boucle pour être plus efficace.

Y a-t-il une meilleure façon d'écrire ce code ?

window.onload=function displayPrices()
{
twentyFourK=(x[i].getElementsByTagName("twentyFourK")[0].childNodes[0].nodeValue);
document.getElementById("twentyFourK").innerHTML=toCurrency(twentyFourK);

oneOzGold=(x[i].getElementsByTagName("oneOzGold")[0].childNodes[0].nodeValue);
document.getElementById("oneOzGold").innerHTML=toCurrency(oneOzGold);

fiveOzGold=(x[i].getElementsByTagName("fiveOzGold")[0].childNodes[0].nodeValue);
document.getElementById("fiveOzGold").innerHTML=toCurrency(fiveOzGold);

tenOzGold=(x[i].getElementsByTagName("tenOzGold")[0].childNodes[0].nodeValue);
document.getElementById("tenOzGold").innerHTML=toCurrency(tenOzGold);

oneKiloGold=(x[i].getElementsByTagName("oneKiloGold")[0].childNodes[0].nodeValue);
document.getElementById("oneKiloGold").innerHTML=toCurrency(oneKiloGold);

//etc.
}

Answer 1

Oui, une fonction pourrait vous faciliter les choses :

window.onload = function() {
    function loadCurrency(name) {
        document.getElementById(name).innerHTML = toCurrency(x[i].getElementsByTagName(name)[0].firstChild.nodeValue);
    }

    loadCurrency('twentyFourK');
    loadCurrency('oneOzGold');
    loadCurrency('fiveOzGold');
    loadCurrency('tenOzGold');
    loadCurrency('oneKiloGold');
};

---

Aussi, si vous avez beaucoup d'articles à charger :

window.onload = function() {
    function loadCurrency(name) {
        document.getElementById(name).innerHTML = toCurrency(x[i].getElementsByTagName(name)[0].firstChild.nodeValue);
    }

    var items = ['twentyFourK', 'oneOzGold', 'fiveOzGold', 'tenOzGold', 'oneKiloGold'];
    items.forEach(loadCurrency);
};

Cela nécessite Array.forEach qui n'est disponible que dans ECMAScript 5. Voici donc une solution de rechange :

Array.prototype.forEach = function(action, thisArg) {
    for(var i = 0, l = this.length; i < l; i++) {
        if(i in this) {
            action.call(thisArg, this[i], i, this);
        }
    }
};

Answer 2

Je placerais le paramètre de la devise dans sa propre méthode. Cela sera plus propre visuellement et permettra également de modifier l'implémentation à l'avenir :

window.onload = function displayPrices() {

    SetCurrency("twentyFourK");
    SetCurrency("oneOzGold");

    //etc.
}
function SetCurrency(name) {
    var elements = x[i].getElementsByTagName(name);
    if ((elements != null) && (elements.length != 0)) {
        elements[0].innerHTML = toCurrency(elements[0].childNodes[0].nodeValue);
    }
}

Answer 3

Vous pourriez créer une fonction avec une liste d'éléments en paramètre, et vous n'auriez qu'à créer une boucle passant par votre liste d'éléments (vingt-quatreK, unKiloOr et ainsi de suite).