如何从JSON对象提取字段渲染到DOM？取值出现undefined如何解决

问题原因 #

state和城市名属性并不在JSON的根节点下，而是存放在places数组的第一个元素中，你直接从根对象data上获取state属性，自然返回undefined。

修正方案 #

访问属性时要补全层级路径，注意带空格的属性名（比如place name）不能用点运算符，要改用方括号语法访问：

var data = JSON.parse(ajax.responseText);
// 提取城市和州信息
var cityName = data.places[0]['place name'];
var stateName = data.places[0].state;
// 渲染到DOM
document.getElementById('city').innerText = cityName;
document.getElementById('state').innerText = stateName;
} else { // 状态错误处理
    document.getElementById('city').innerHTML = ajax.statusText;
    document.getElementById('state').innerHTML = ajax.statusText;
}

补充说明 #

• 如果places数组可能包含多个地点数据，可以根据实际业务需求遍历数组取值，不要写死下标[0]
• 渲染纯文本内容优先使用innerText，相比innerHTML可以避免XSS注入风险，性能也更好

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