当涉及到javascript时，我仍然是一个业余爱好者，但我有一个由一系列对象组成的JSON文件。每个对象都有两个属性，一个行政区和映射。映射还有两个属性，宏和邻域。宏有点像一个更大的社区。
我需要以显示层次结构的方式显示自治市镇及其邻居的列表。
将宏邻域拟合到该层次结构中，但只列出行政区列表中的宏邻域，如果它与行政区不同。此外，自治市镇和宏观社区应按重量递增。
我已经使用JSON格式化程序将JSON文件转换为一系列对象，但我不知道如何通过html / javascript引用它来创建两个（一个带有邻域列表，另一个带有自治市镇。有人可以帮忙吗？
档案示例：
"data":[
{
"borough":{
"name":"Manhattan",
"id":18,
"weight":1
},
"mappings":[
{
"macro":{
"name":"Below 14th St",
"id":19,
"weight":1
},
"neighborhoods":[
{
"id":20,
"name":"Battery Park City"
},
{
"id":21,
"name":"Civic Center"
},
{
"id":22,
"name":"East Village"
},
{
"id":23,
"name":"Financial District"
},
{
"id":24,
"name":"Greenwich Village"
},
{
"id":25,
"name":"Little Italy"
},
{
"id":26,
"name":"Lower East Side"
},
{
"id":27,
"name":"NoHo"
},
{
"id":28,
"name":"Nolita"
},
{
"id":29,
"name":"SoHo"
},
{
"id":30,
"name":"TriBeCa"
},
{
"id":31,
"name":"Union Square"
},
{
"id":32,
"name":"West Village"
}
]
},
{
"macro":{
"name":"14th to 59th St",
"id":33,
"weight":2
},
"neighborhoods":[
{
"id":34,
"name":"Flatiron"
},
{
"id":35,
"name":"Gramercy"
},
{
"id":36,
"name":"Kips Bay"
},
{
"id":37,
"name":"Koreatown"
},
{
"id":38,
"name":"Midtown East"
},
{
"id":39,
"name":"Murray Hill"
},
{
"id":41,
"name":"Chelsea"
},
{
"id":42,
"name":"Hell's Kitchen"
},
{
"id":43,
"name":"Midtown West"
}
]
},
{
"macro":{
"name":"Upper East",
"id":44,
"weight":3
},
"neighborhoods":[
{
"id":45,
"name":"East Harlem"
},
{
"id":46,
"name":"Roosevelt Island"
},
{
"id":47,
"name":"Upper East Side"
}
]
},
{
"macro":{
"name":"Upper West",
"id":48,
"weight":4
},
"neighborhoods":[
{
"id":49,
"name":"Central Park"
},
{
"id":50,
"name":"Upper West Side"
}
]
},
{
"macro":{
"name":"Above 125th St",
"id":51,
"weight":5
},
"neighborhoods":[
{
"id":52,
"name":"Harlem"
},
{
"id":53,
"name":"Inwood"
},
{
"id":54,
"name":"Washington Heights"
}
]
}
]
},
{
"borough":{
"name":"Brooklyn",
"id":55,
"weight":2
},
"mappings":[
{
"macro":{
"name":"Brooklyn Heights",
"id":307,
"weight":1
},
"neighborhoods":[
{
"id":65,
"name":"Brooklyn Heights"
},
{
"id":77,
"name":"DUMBO"
},
{
"id":79,
"name":"Downtown Brooklyn"
},
{
"id":117,
"name":"Vinegar Hill"
}
]
},
{
"macro":{
"name":"BoCoCa",
"id":306,
"weight":2
},
"neighborhoods":[
{
"id":62,
"name":"Boerum Hill"
},
{
"id":69,
"name":"Carroll Gardens"
},
{
"id":72,
"name":"Cobble Hill"
},
{
"id":73,
"name":"Columbia Street Waterfront District"
},
{
"id":108,
"name":"Red Hook"
}
]
},
答案 0 :(得分：0)
请使用这个......
<select id="borough_list" name="borough_list">
<option value="">select</option>
</select>
<select id="neighborhoods_list" name="neighborhoods_list">
<option value="">select</option>
</select>
var obj = [
{"borough":{"name":"Manhattan","id":18,"weight":1},
"mappings":[
{"macro":{"name":"Below 14th St","id":19,"weight":1},
"neighborhoods":[{"id":20,"name":"Battery Park City"},{"id":21,"name":"Civic Center"},{"id":22,"name":"East Village"},{"id":23,"name":"Financial District"},{"id":24,"name":"Greenwich Village"},{"id":25,"name":"Little Italy"},{"id":26,"name":"Lower East Side"},{"id":27,"name":"NoHo"},{"id":28,"name":"Nolita"},{"id":29,"name":"SoHo"},{"id":30,"name":"TriBeCa"},{"id":31,"name":"Union Square"},{"id":32,"name":"West Village"}]
},
{"macro":{"name":"14th to 59th St","id":33,"weight":2},
"neighborhoods":[{"id":34,"name":"Flatiron"},{"id":35,"name":"Gramercy"},{"id":36,"name":"Kips Bay"},{"id":37,"name":"Koreatown"},{"id":38,"name":"Midtown East"},{"id":39,"name":"Murray Hill"},{"id":41,"name":"Chelsea"},{"id":42,"name":"Hell's Kitchen"},{"id":43,"name":"Midtown West"}]
},
{"macro":{"name":"Upper East","id":44,"weight":3},
"neighborhoods":[{"id":45,"name":"East Harlem"},{"id":46,"name":"Roosevelt Island"},{"id":47,"name":"Upper East Side"}]
},
{"macro":{"name":"Upper West","id":48,"weight":4},
"neighborhoods":[{"id":49,"name":"Central Park"},{"id":50,"name":"Upper West Side"}]
},
{"macro":{"name":"Above 125th St","id":51,"weight":5},
"neighborhoods":[{"id":52,"name":"Harlem"},{"id":53,"name":"Inwood"},{"id":54,"name":"Washington Heights"}]
}
]
},
{"borough":{"name":"Brooklyn","id":55,"weight":2},
"mappings":[
{"macro":{"name":"Brooklyn Heights","id":307,"weight":1},
"neighborhoods":[{"id":65,"name":"Brooklyn Heights"},{"id":77,"name":"DUMBO"},{"id":79,"name":"Downtown Brooklyn"},{"id":117,"name":"Vinegar Hill"}]
},
{"macro":{"name":"BoCoCa","id":306,"weight":2},
"neighborhoods":[{"id":62,"name":"Boerum Hill"},{"id":69,"name":"Carroll Gardens"},{"id":72,"name":"Cobble Hill"},{"id":73,"name":"Columbia Street Waterfront District"},{"id":108,"name":"Red Hook"}]
}
]
}
];
var myJSON = JSON.stringify(obj);
var borough = [];
var result_borough = [];
var mappings = [];
var neighborhoods = [];
var neighborhoods_list = [];
var result_neighborhoods = [];
obj.forEach(function(entry) {
borough = entry.borough;
mappings = entry.mappings;
result_borough.push(borough);
mappings.forEach(function(neighborhoods_list_entry) {
neighborhoods_list = neighborhoods_list_entry.neighborhoods;
neighborhoods_list.forEach(function(neighborhoods_entry) {
result_neighborhoods.push(neighborhoods_entry);
});
});
});
console.log(result_borough);
console.log(result_neighborhoods);
result_borough.forEach(function(result_borough) {
var select = document.getElementById("borough_list");
var opt = document.createElement('option');
opt.value = result_borough;
opt.innerHTML = result_borough;
select.appendChild(opt);
});
result_neighborhoods.forEach(function(result_neighborhoods) {
var select = document.getElementById("neighborhoods_list");
var opt = document.createElement('option');
opt.value = result_neighborhoods;
opt.innerHTML = result_neighborhoods;
select.appendChild(opt);
});