如何在HTML中显示JSON的单个addr字段？解决代码无输出问题

核心问题 #

1. 你的JSON是单个地址对象，而非数组，但代码中使用$.each(data, ...)会遍历对象的所有键（如addr、lat），而非处理单个地址条目。
2. 目标字段（city/suburb/postcode/country）实际嵌套在data.raw.address路径下，直接访问address.city无法获取有效数据。

修正后的代码 #

<table id="data-table">
    <thead>
        <tr>
        <th>City</th>
        <th>Suburb</th>
        <th>Postcode</th>
        <th>Country</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<!-- JavaScript code using jQuery -->
<script>
$(document).ready(function() {
    $.getJSON("dwd/geo-where-I-will-be.json", function(data) {
        var tableBody = $("#data-table tbody");
        var address = data.raw.address; // 直接获取嵌套的地址数据
        
        var row = $("<tr></tr>");
        // 从正确的路径读取字段
        row.append($("<td></td>").text(address.city));
        row.append($("<td></td>").text(address.suburb));
        row.append($("<td></td>").text(address.postcode));
        row.append($("<td></td>").text(address.country));

        tableBody.append(row);
    });
});
</script>

额外说明 #

如果之后需要支持多地址数组的情况，只需将JSON结构改为数组格式（如[{"addr": "...", ...}, {...}]），再恢复$.each遍历逻辑即可。

内容的提问来源于stack exchange，提问作者Teffi71