输出对象数组javascript

Question

我通过解决创建包含保险公司的下拉菜单的任务，然后第二个下拉菜单显示保险公司提供的保险类型，财产，车队或motortrade（提供的保险类型包括一个数字）。）一旦选择了两个选择下拉菜单，显示相关的数字。

目前，这是据我得感谢以下http://codepen.io/anon/pen/yoEiL

继承人的HTML一些帮助：

<form action="" method="get" class="insurance-numbers"> 
    <div> 
    <select id="company"> 

    </select> 
    </div> 
    <div> 
    <select id="insurance-type"> 

    </select> 
    </div> 
    <div id="insurance-number"></div> 
</form> 

和Javascript：

var insurancecompanies = [ 
    { 
    name : 'Advent', 
    property : '01242 674 674', 
    fleet : '', 
    motortrade : '' 
    }, 
    { name : 'Allianz', 
    property : '0844 412 9988', 
    fleet : '0800 587 5858', 
    motortrade : '' 
    }, 
    { name : 'Aviva', 
    property : '0800 015 1498', 
    fleet : '0800 246 876', 
    motortrade : '0800 246 876' 
    }, 
    { name : 'AXA', 
    property : '0870 900 0867', 
    fleet : '0870 900 0860', 
    motortrade : '0870 900 1753' 
    }, 
    { name : 'Catlin', 
    property : '', 
    fleet : '0800 066 5364', 
    motortrade : '' 
    }, 
    { name : 'Chartis', 
    property : '', 
    fleet : '0844 477 6544', 
    motortrade : '' 
    }, 
    { name : 'Clegg Gifford', 
    property : '', 
    fleet : '', 
    motortrade : '01708 729 529' 
    }, 
    { name : 'Equity Red Star', 
    property : '', 
    fleet : '0845 609 1235', 
    motortrade : '' 
    }, 
    { name : 'Highway/LV', 
    property : '', 
    fleet : '0845 373 1244', 
    motortrade : '' 
    }, 
    { name : 'NIG', 
    property : '', 
    fleet : '0845 300 4644', 
    motortrade : '0845 300 4644' 
    }, 
    { name : 'QBE', 
    property : '', 
    fleet : '01245 272 700', 
    motortrade : '' 
    }, 
    { name : 'Royal Sun Alliance', 
    property : '0845 077 0120', 
    fleet : '0845 675 0404', 
    motortrade : '0845 077 0119' 
    }, 
    { name : 'Summit', 
    property : '', 
    fleet : '01254 396 655', 
    motortrade : '' 
    }, 
    { name : 'Zurich', 
    property : '0845 300 2055', 
    fleet : '0800 300 2055', 
    motortrade : '' 
    } 
]; 


function findCompany(name) { 
    var i = 0, len = insurancecompanies.length; 
    for (i; i < len; i += 1) { 
    if (insurancecompanies[i].name === name) { 
     return insurancecompanies[i]; 
    } 
    } 
    return null; 
}; 

var dropdown = [], i = 0, len = insurancecompanies.length; 
for (i; i < len; i += 1) { 
    dropdown.push(insurancecompanies[i].name); 
} 

$.each(dropdown, function(i, val) { 
    $("#company").append("<option val=\""+ val +"\">" + val + "</option>"); 
}); 

$('#company').on('change', function() { 
    var optionSelected = $("option:selected", this); 
    var valueSelected = this.value; 
    var selectedInsurance = findCompany(valueSelected); 
    for (i in selectedInsurance) { 
     $("#insurance-type").append("<option val=\""+ selectedInsurance[i] +"\">" + selectedInsurance[i] + "</option>"); 
    } 
}); 

目前它正确显示保险公司名单。然后选择变更后的公司。我需要它然后显示它提供的保险类型（忽略那些它dosn't（那些没有数字），然后在该选择显示在＃保险号码的数字。

因此，以演示如果我选择Allianz，第二个下拉列表将包含'property'和'fleet'。如果用户选择'fleet'，则编号'0800 587 5858'将被附加到div＃insurance-number'。

对不起，如果这很混淆我真的需要一些帮助，这就是一切。

Answer 1

要访问对象属性使用类似myArray[index].property

访问对象属性'name'的是DEMO。

如果您想输出整个对象替换(insurancecompanies[i].name)与console.log(insurancecompanies[i])并查看您的控制台日志。

要填充选择菜单像你要求与JavaScript中使用类似波纹管DEMO

var insurancecompanies = [ 
{ 
    name : 'Advent', 
    property : '01242 674 674', 
    fleet : '', 
    motortrade : '' 
}, 
{ name : 'Allianz', 
    property : '0844 412 9988', 
    fleet : '0800 587 5858', 
    motortrade : '' 
}, 
{ name : 'Aviva', 
    property : '0800 015 1498', 
    fleet : '0800 246 876', 
    motortrade : '0800 246 876' 
}, 
{ name : 'AXA', 
    property : '0870 900 0867', 
    fleet : '0870 900 0860', 
    motortrade : '0870 900 1753' 
}, 
{ name : 'Catlin', 
    property : '', 
    fleet : '0800 066 5364', 
    motortrade : '' 
}, 
{ name : 'Chartis', 
    property : '', 
    fleet : '0844 477 6544', 
    motortrade : '' 
}, 
{ name : 'Clegg Gifford', 
    property : '', 
    fleet : '', 
    motortrade : '01708 729 529' 
}, 
{ name : 'Equity Red Star', 
    property : '', 
    fleet : '0845 609 1235', 
    motortrade : '' 
}, 
{ name : 'Highway/LV', 
    property : '', 
    fleet : '0845 373 1244', 
    motortrade : '' 
}, 
{ name : 'NIG', 
    property : '', 
    fleet : '0845 300 4644', 
    motortrade : '0845 300 4644' 
}, 
{ name : 'QBE', 
    property : '', 
    fleet : '01245 272 700', 
    motortrade : '' 
}, 
{ name : 'Royal Sun Alliance', 
    property : '0845 077 0120', 
    fleet : '0845 675 0404', 
    motortrade : '0845 077 0119' 
}, 
{ name : 'Summit', 
    property : '', 
    fleet : '01254 396 655', 
    motortrade : '' 
}, 
{ name : 'Zurich', 
    property : '0845 300 2055', 
    fleet : '0800 300 2055', 
    motortrade : '' 
} 
]; 

function foo() { 

    select = document.getElementById('foo'); 

    for (var i=0; i<insurancecompanies.length; i++){ 
     var opt = document.createElement('option'); 
     opt.innerHTML = insurancecompanies[i].name; 
     select.appendChild(opt); 
    } 

} 

foo(); 

Answer 2

，如果你想创建的基于阵列中的每个对象的 name属性选项的下拉菜单，然后你”

ð做这样的事情：

var dropdown = [], i = 0, len = insurancecompanies.length; 
for (i; i < len; i += 1) { 
    dropdown.push(insurancecompanies[i].name); 
} 

使用dropdown来填充你的选择。 然后通过遍历它使用所选的选项，并找到相应的对象数组中：

function findCompany(name) { 
    var i = 0, len = insurancecompanies.length; 
    for (i; i < len; i += 1) { 
    if (insurancecompanies[i].name === name) { 
     return insurancecompanies[i]; 
    } 
    } 
    return null; 
}; 

UPDATE：您需要在company选择添加change事件。在变化，适用findCompany(selectedOption)然后填充第二个选择，而不是迭代你将不得不或多或少地迭代对象属性，像这样的数组，但：

var selectedInsurance = findCompany(selectedOption); // selectedOption is the value of the first select 

for (i in selectedInsurance) { 
    // here add to your dropdown selectedInsurance[i] 
}