p5.js导入元素全在同一数组的JSON文件时如何提取单个条目

适配逻辑 #

针对无分类嵌套、所有条目处于同一平铺层级的JSON文件，无需通过多层嵌套键名逐层索引，直接基于数据的原生结构特性取值即可，读取逻辑比带分类层级的JSON更简单。

实现步骤 #

• 在全局作用域声明变量存储JSON加载结果
• 利用p5.js的preload生命周期钩子加载本地JSON文件，避免异步加载时序问题导致读取出错
  参考代码：

  let loadedJSON;
  
  function preload() {
    // 替换为项目内JSON文件的相对静态路径
    loadedJSON = loadJSON("target_file.json");
  }
  

• 按照JSON的实际结构读取单条目：
  • 如果JSON为纯数组结构（所有条目是数组的直接元素）：通过数组下标索引取值，下标从0开始计数

    function setup() {
      // 取数组中第1个条目，对应下标为0
      const singleEntry = loadedJSON[0];
      console.log(singleEntry);
    }
    

  • 如果JSON为平铺键值对结构（即你当前使用的英文单词列表的实际结构：键为单词字符串，值为固定标记值）：直接通过目标键名取值

    function setup() {
      // 精准匹配键名获取对应单词
      const targetWord = loadedJSON["example"];
      // 如需随机抽取单个条目，先提取所有键名组成数组，再通过随机下标取值
      const allKeys = Object.keys(loadedJSON);
      const randomIndex = Math.floor(Math.random() * allKeys.length);
      const randomWord = allKeys[randomIndex];
      console.log(randomWord);
    }
    

常见报错排查 #

• 读取结果为undefined时，优先检查JSON文件的语法合法性，排查多余逗号、未闭合括号、键名缺少引号等问题
• 禁止直接跨域加载第三方站点的远程JSON资源，受浏览器安全策略限制这类请求会被拦截
• 不要在draw函数启动前的逻辑中直接读取JSON数据，需确保加载流程完成后再执行取值操作

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