Struggling with repeating code with JavaScript and DOM

Question

For an assignment i need to create a website which outputs mobile phone contracts based on the users preferences. I am currently stuck at the DOM part of the assignment.

I would like to output the results into a list, which i have managed to do, though i'm sure there's a better way to do it using less code. This is what i have so far: https://jsfiddle.net/fn2ewtck/

The code i am trying to improve is this:

function search() {
var userBrandCtrl = document.getElementById("userBrand");
var userBrand = userBrandCtrl.value;

var userModelCtrl = document.getElementById("userModel");
var userModel = userModelCtrl.value;

var userNetworkCtrl = document.getElementById("userNetwork");
var userNetwork = userNetworkCtrl.value;


for (var i = 0; cont.length; i++) {
    if (userBrand === cont[i].brand && userModel === cont[i].model && userNetwork === cont[i].network) {
        var body = document.body;

        var ulCont = document.createElement("ul");

        var liBrand = document.createElement("li");
        var liModel = document.createElement("li");
        var liNetwork = document.createElement("li");
        var liMins = document.createElement("li");
        var liTexts = document.createElement("li");
        var liData = document.createElement("li");
        var liUpfront = document.createElement("li");
        var liMonthly = document.createElement("li");
        var liLength = document.createElement("li");

        var textBrand = document.createTextNode("Brand: " + cont[i].brand);
        var textModel = document.createTextNode("Model: " + cont[i].model);
        var textNetwork = document.createTextNode("Network " + cont[i].network);
        var textMins = document.createTextNode("Mins: " + cont[i].mins);
        var textTexts = document.createTextNode("Texts: " + cont[i].texts);
        var textData = document.createTextNode("Data: " + cont[i].data);
        var textUpfront = document.createTextNode("Upfront: " + cont[i].upfront);
        var textMonthly = document.createTextNode("Monthly: " + cont[i].monthly);
        var textLength = document.createTextNode("Length: " + cont[i].length);

        liBrand.appendChild(textBrand);
        liModel.appendChild(textModel);
        liNetwork.appendChild(textNetwork);
        liMins.appendChild(textMins);
        liTexts.appendChild(textTexts);
        liData.appendChild(textData);
        liUpfront.appendChild(textUpfront);
        liMonthly.appendChild(textMonthly);
        liLength.appendChild(textLength);

        ulCont.appendChild(liBrand);
        ulCont.appendChild(liModel);
        ulCont.appendChild(liNetwork);
        ulCont.appendChild(liMins);
        ulCont.appendChild(liTexts);
        ulCont.appendChild(liData);
        ulCont.appendChild(liUpfront);
        ulCont.appendChild(liMonthly);
        ulCont.appendChild(liLength);

        body.appendChild(ulCont);

    }
}

};

How could i do this better? Thanks.

Answer 1

You could create an array of the properties you want to display from the object and loop over them like this:

var arr = ['brand', 'model', 'network', 'mins']
for (i = 0; i < arr.length; i++) {
    //Upercase first letter
    var label = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
    //create html elements
    var li = document.createElement("li"),
        text = document.createTextNode(label + ": " + cont[i][arr[i]]);
    li.appendChild(text);
    ulCont.appendChild(li);
}
//append to body after loop
body.appendChild(ulCont);