使用eel时，如何在JavaScript中提取JSON指定字段并赋值变量？

嘿，我看到你在这里遇到了一个小误区——其实你根本不需要把传入的a转成JSON字符串！Eel会自动帮你把Python的字典转换成JavaScript的原生对象，所以直接用对象访问语法就行，不用多此一举转成字符串~

首先，先修正你的JavaScript接收函数，去掉JSON.stringify(a)这一步，因为Eel已经把Python传递的字典转成了JS对象：

eel.expose(my_javascript_function);
function my_javascript_function(a) {
  // 现在a已经是一个JS对象，不是字符串！
  console.log(a); // 你可以在浏览器控制台看到这个对象的结构，方便调试
}

接下来分两种场景处理你的需求：

1. 提取顶层键（比如"TEST"或"Nik"）到变量 #

如果你想把顶层的键名赋值给变量，有几种方式：

• 直接指定键名（适合已知目标键的情况）：

  // 把"TEST"赋值给变量
  var topKey = "TEST";
  // 或者把"Nik"赋值给变量
  var anotherTopKey = "Nik";
  

• 如果想获取所有顶层键，用Object.keys()方法：

  // 获取所有顶层键，返回一个数组 ["TEST", "Nik"]
  var allTopKeys = Object.keys(a);
  // 可以取第一个键赋值给变量
  var firstTopKey = allTopKeys[0];
  

2. 访问特定分类下的内容 #

有两种语法可以访问对象的属性，效果完全一致：

• 点语法（适合已知键名、且键名无特殊字符的情况）：

  // 获取TEST分类下的name
  var testName = a.TEST.name;
  // 获取Nik分类下的telephone
  var nikTelephone = a.Nik.telephone;
  

• 方括号语法（适合键名存在变量里，或者键名包含特殊字符的情况）：

  var targetKey = "TEST";
  // 用变量访问分类
  var testEmail = a[targetKey].email;
  // 直接用字符串访问也可以
  var nikName = a["Nik"].name;
  

完整示例代码 #

把这些逻辑整合起来，你的JS函数可以写成这样：

eel.expose(my_javascript_function);
function my_javascript_function(a) {
  // 提取顶层键"TEST"到变量
  var targetCategory = "TEST";
  
  // 访问该分类下的name和email
  var categoryName = a[targetCategory].name;
  var categoryEmail = a[targetCategory].email;
  
  // 把结果显示到页面
  document.getElementById("demo").innerHTML = 
    `分类${targetCategory}的名称：${categoryName}，邮箱：${categoryEmail}`;
}

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