我正在使用显示自治市镇及其宏观社区的JSON文件创建列表。自治市镇和宏观社区应该按重量递增，这就是我遇到问题的地方。下面是HTML和JSON文件的代码。提前谢谢。
<!doctype html>
<title>Code Challenge</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Coding Challenge</h1>
<p>Click a neighborhood in the box on the left to highlight the borough in the box on the right</p>
<!-- The data is stored in a file as a javascript variable: -->
<script type="text/javascript" src="datafile.js"></script>
<!--Define the basic screen layout as two divs side by side -->
<div class="flex-row">
<div id="area_a" class="app_list"></div>
<div id="area_b" class="app_list"></div>
</div>
<!-- Grab jQuery for click handling: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var data = locationData['data'];
<!--Iterate through the JSON object and convert boroughs, macros, and neighborhoods to HTML objects-->
for (var i = 0; i < data.length; i++) {
var item = data[i];
var divA = document.createElement("div");
var divB = document.createElement("div");
var boroughName = item.borough.name;
divB.setAttribute("class", toClassName(boroughName));
divA.appendChild(document.createTextNode(boroughName));
document.getElementById('area_a').appendChild(divA);
document.getElementById('area_b').appendChild(divB);
divB.appendChild(document.createTextNode(item.borough.name));
var ulMappings = document.createElement('ul');
for (var j = 0; j < item.mappings.length; j++) {
var map = item.mappings[j].macro;
if(map.name == boroughName){
console.log("EQUAL");
var liMacro = document.createElement("li");
ulMappings.appendChild(liMacro);
liMacro.appendChild(document.createTextNode(""));
ulMappings.className = "ul-unlisted";
} else{
var liMacro = document.createElement("li");
liMacro.appendChild(document.createTextNode(map.name));
ulMappings.appendChild(liMacro);
}
var ulHood = document.createElement('ul');
for (var k = 0; k < item.mappings[j].neighborhoods.length; k++) {
var hoodName = item.mappings[j].neighborhoods[k].name;
var liHood = document.createElement('li');
liHood.setAttribute("class", toClassName(boroughName));
liHood.appendChild(document.createTextNode(hoodName));
ulHood.appendChild(liHood);
}
liMacro.appendChild(ulHood);
}
document.getElementById('area_a').appendChild(ulMappings);
}
<!-- Handler for clicking on a neighborhood -->
$('#area_a ul li ul li').click(function() {
var clickedClass = $(this).attr("class");
$('#area_b div').removeClass("highlight");
$('#area_b div.' + clickedClass).addClass("highlight");
});
});
<!-- Helper function to convert borough names to valid HTML class names -->
function toClassName(string) {
var newString = string.replace(' ', '');
return newString.toLowerCase();
}
</script>
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
</body>
这是我正在使用的Json文件：
"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"
}
]
},
{
"macro": {
"name": "Fort Greene",
"id": 309,
"weight": 3
},
"neighborhoods": [
{
"id": 59,
"name": "Bedford Stuyvesant"
},
{
"id": 71,
"name": "Clinton Hill"
},
{
"id": 86,
"name": "Fort Greene"
}
]
},
{
"macro": {
"name": "Park Slope",
"id": 310,
"weight": 4
},
"neighborhoods": [
{
"id": 104,
"name": "Park Slope"
}
]
},
{
"macro": {
"name": "Prospect Park - South",
"id": 311,
"weight": 5
},
"neighborhoods": [
{
"id": 78,
"name": "Ditmas Park"
},
{
"id": 94,
"name": "Kensington"
},
{
"id": 112,
"name": "South Slope"
},
{
"id": 116,
"name": "Sunset Park"
},
{
"id": 121,
"name": "Windsor Terrace"
}
]
},
{
"macro": {
"name": "Prospect Park - East",
"id": 308,
"weight": 6
},
"neighborhoods": [
{
"id": 75,
"name": "Crown Heights"
},
{
"id": 81,
"name": "East Flatbush"
},
{
"id": 84,
"name": "Flatbush"
},
{
"id": 105,
"name": "Prospect Heights"
},
{
"id": 106,
"name": "Prospect Lefferts Gardens"
},
{
"id": 107,
"name": "Prospect Park"
}
]
},
{
"macro": {
"name": "Williamsburg",
"id": 312,
"weight": 7
},
"neighborhoods": [
{
"id": 67,
"name": "Bushwick"
},
{
"id": 83,
"name": "East Williamsburg"
},
{
"id": 92,
"name": "Greenpoint"
},
{
"id": 113,
"name": "South Williamsburg"
},
{
"id": 119,
"name": "Williamsburg - North Side"
},
{
"id": 120,
"name": "Williamsburg - South Side"
}
]
}
]
},
{
"borough": {
"name": "Queens",
"id": 123,
"weight": 3
},
"mappings": [
{
"macro": {
"name": "Queens",
"id": 124,
"weight": 0
},