Борьба с повторяющимся кодом с JavaScript и DOM

Question

Для задания мне нужно создать веб-сайт, который выводит контракты на мобильный телефон на основе предпочтений пользователей. В настоящее время я застрял в части DOM задания.

Я хотел бы выводить результаты в список, который мне удалось сделать, хотя я уверен, что есть лучший способ сделать это, используя меньше кода. Это то, что я до сих пор: https://jsfiddle.net/fn2ewtck/

Код я пытаюсь улучшить это:

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

    } 
} 

};

Как я мог сделать это лучше? Спасибо.

Answer 1

Вы можете создать массив свойств, которые вы хотите отобразить от объекта и петли над ними, как это:

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

Answer 2

Вы должны смотреть на Backbone и Dust. Они помогут вам запланировать HTML-код, который вы пытаетесь написать.