如何通过变量值访问JSON数据？JavaScript新手求助

嘿，我明白你遇到的问题了——作为JS/jQuery新手，这种作用域和对象引用的坑确实容易踩！

问题根源 #

你现在的fileNameRefined变量里存的是字符串"draft"，当你写fileNameRefined["title"]的时候，JS会把它当成访问字符串的title属性，而不是去找到名为draft的那个JSON对象。字符串本身根本没有title属性，所以自然返回undefined啦。

解决方案 #

根据你的场景，有几种靠谱的处理方式：

1. 如果draft是全局变量

全局变量会挂载在浏览器的window对象上，你可以通过window的方括号语法，用字符串变量来获取对应的对象：

// 假设fileNameRefined的值是"draft"
const title = window[fileNameRefined]["title"];
// 或者更简洁的写法：window[fileNameRefined].title
console.log(title); // 会输出"Title"

2. 更推荐：用一个对象存储所有JSON数据（避免全局污染）

直接用全局变量不是最佳实践，更好的方式是创建一个专门的"数据仓库"对象，把所有加载的JSON对象都存进去：

// 先初始化一个空的存储对象
const jsonStore = {};

// 把你的draft对象存进去
jsonStore.draft = { "title": "Title", "subtitle": "Subtitle", "image": "/image.jpeg" };

// 之后用变量访问就没问题了
const title = jsonStore[fileNameRefined].title;
console.log(title);

3. 结合AJAX请求的场景

如果你是通过AJAX加载JSON文件，那可以在请求成功后直接把数据存入这个仓库：

const jsonStore = {};

// 你的AJAX请求示例
$.ajax({
  url: fileName, // 这里的fileName是你获取到的JSON文件名
  dataType: "json",
  success: function(jsonData) {
    // 处理得到fileNameRefined
    const fileNameRefined = fileName.replace("/", "").replace(/\d+|-/g, "").replace(".json", "");
    // 把加载到的JSON数据存入仓库
    jsonStore[fileNameRefined] = jsonData;
    // 现在就能正常访问了！
    console.log(jsonStore[fileNameRefined].title);
  }
});

小提示 #

JS里访问对象属性有两种方式：

• 点语法：obj.property，适用于属性名是固定字符串的情况
• 方括号语法：obj[variable]，适用于属性名是变量或者特殊字符的情况

你现在的场景正好需要用方括号语法来动态访问对象~

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