从JSON获取的数据无法在浏览器显示及Puppeteer数据处理问题

一、提取JSON中的0.887数值 #

有两种处理方式，按需选择：

1. 爬取阶段直接提取（推荐） #

修改Puppeteer代码，在获取元素文本时直接过滤出数字部分，避免后续额外处理：

// index.js爬取逻辑修改
const changeValue = await page.$eval('.tv-symbol-price-quote__change-value', el => {
  // 移除正负号，只保留数字和小数点
  return el.textContent.replace(/[^\d.]/g, '');
});
// 保存处理后的数值到JSON
await fs.promises.writeFile('arreglo.json', JSON.stringify([changeValue]));

修改后生成的arreglo.json内容为["0.887"]，可直接使用。

2. 前端读取JSON后处理 #

如果不想改动爬取代码，在fetch数据后再提取数字：

// 假设已完成fetch请求并拿到响应
const data = await response.json();
// 提取数组第一个元素，过滤非数字内容
const numericValue = data[0].replace(/[^\d.]/g, '');

二、解决fetch数据无法展示到.container的问题 #

从常见错误点逐一排查修复：

1. 确认fetch路径正确性 #

确保arreglo.json和HTML文件在同一目录，使用正确的相对路径：

fetch('./arreglo.json') // 开头的./不可省略，保证指向当前目录下的JSON文件
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })

2. 保证DOM加载完成后再操作 #

将fetch代码放在DOM加载完成的回调中，避免容器元素未创建就执行操作：

document.addEventListener('DOMContentLoaded', async () => {
  try {
    const response = await fetch('./arreglo.json');
    const data = await response.json();
    const container = document.querySelector('.container');
    
    if (!container) {
      console.error('未找到.container元素');
      return;
    }
    
    // 处理数据并插入容器
    const value = data[0].replace(/[^\d.]/g, '');
    container.textContent = `当前变动数值：${value}`;
  } catch (err) {
    console.error('加载数据失败：', err);
  }
});

3. 排查JSON格式错误 #

打开浏览器控制台（F12）查看报错，如果提示JSON解析失败，检查arreglo.json的格式是否正确（比如引号是否匹配、有无多余逗号）。

4. 确认.container元素存在 #

在浏览器Elements面板搜索.container，检查元素是否存在、选择器拼写是否正确。

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