подскажите почему не работает вывод данных из JSON v HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Task #10</title>
</head>
<body>
<div class="container">
<div class ="table-responsive">
<h1>JSON to HTML</h1> </div><br />
</div>
</div>
<table id="country_table">
<tr>
<th>Country</th>
<th>State</th>
<th>ZIP</th>
<th>House Number</th>
<th>Street Name</th>
<th>arrival Date</th>
<th>urban</th>
</tr>
</table>
<script>
$(document).ready(function(){
$.getJSON("USA.json", function(data){
var country_data='';
$.each(data, function(key, value) {
country_data += '<tr>';
country_data += '<td>' + value.Country + '</td>';
country_data += '<td>' + value.State + '</td>';
country_data += '<td>' + value.ZIP + '</td>';
country_data += '<td>' + value.NouseNumber + '</td>';
country_data += '<td>' + value.StreetName + '</td>';
country_data += '<td>' + value.arrivaDate + '</td>';
country_data += '<td>' + value.urban + '</td>';
country_data += '<tr>';
});
$('#country_table').append(country_data);
});
});
</script>
</body>
</html>
JSON
[
{
"Country": "USA",
"State": "MA",
"City": "Boston",
"ZIP":"02215",
"HouseNumber": 457,
"StreetName":"Park Dr",
"arrivalDate":"2019-09-01",
"urban": true
},
{
"Country": "USA",
"State": "California",
"City": "La Jolla",
"ZIP":"92092",
"HouseNumber": 234,
"StreetName":"Village Dr",
"arrivalDate":"2018-09-01",
"urban": false
}
]
