如何在JavaScript中过滤复杂JSON文件并解决属性读取报错问题

问题原因 #

• data.Jobs数组中存在部分元素没有Job属性，直接访问element.Job.Settings时，element.Job为undefined，触发类型错误
• 代码存在字段大小写拼写错误：控制台打印时使用的是FileInput（I大写），过滤判断时写的是Fileinput（i小写），拼写不一致会导致即使结构正常也匹配不到目标数据

修正方案 #

如果运行环境支持ES2020+的可选链语法，直接用可选链做逐层空值防护，同时修正字段拼写即可：

data = JSON.parse(data);
const targetPath = 's3://transvideo-source71e471f1-knewdmajkw29/assets01/Pexels Videos 2219383.mp4';
const rslt = Array.isArray(data.Jobs) ? data.Jobs.filter(element => {
  return element?.Job?.Settings?.Inputs?.[0]?.FileInput === targetPath;
}) : [];

如果需要兼容不支持可选链的旧环境，改用逐层空值判断写法：

data = JSON.parse(data);
const targetPath = 's3://transvideo-source71e471f1-knewdmajkw29/assets01/Pexels Videos 2219383.mp4';
let rslt = [];
if (Array.isArray(data.Jobs)) {
  rslt = data.Jobs.filter(function(element) {
    return element
      && element.Job
      && element.Job.Settings
      && Array.isArray(element.Job.Settings.Inputs)
      && element.Job.Settings.Inputs[0]
      && element.Job.Settings.Inputs[0].FileInput === targetPath;
  });
}

内容的提问来源于stack exchange，提问作者박종현