如何在input range的change事件中使用Array.from并处理JSON数组

我看你现在的问题核心是没法在handleChangeAmount这个change事件处理函数里拿到解析好的JSON数组，而且代码里还有一些重复操作和逻辑问题，我来一步步帮你修正：

问题分析 #

1. 你在parseJson里重复调用了两次fetch，这完全没必要，一次请求就够了
2. 直接把handleChangeAmount传给fetch的then是错误的——then接收的参数是解析后的JSON数据，但handleChangeAmount是事件处理函数，它的参数应该是事件对象，两者不匹配
3. 你在createUserLine里重复获取$aantalGrammys并绑定事件，会导致事件被多次绑定，触发一次change事件会执行多次处理函数
4. 没有把解析后的JSON数据存储起来，导致事件处理函数无法访问到它

修正后的代码方案 #

我们可以把解析后的JSON数据存在一个全局变量（新手用全局变量更直观，也可以用闭包优化），然后在事件处理函数里直接使用它，同时修正事件绑定的逻辑：

// 定义全局变量存储解析后的JSON数组
let grammyData = [];

const handleChangeAmount = (e) => {
  const selectedValue = e.currentTarget.value;
  console.log('当前选中的Grammy数量:', selectedValue);
  
  // 这里就可以使用grammyData数组了，比如用Array.from处理
  const processedData = Array.from(grammyData, item => {
    // 这里写你的处理逻辑，比如筛选出获得对应数量Grammy的条目
    return {
      ...item,
      // 举个例子：给每个条目添加选中数量的标记
      selectedAmount: selectedValue
    };
  });
  
  console.log('处理后的数组:', processedData);
};

const parseJson = () => {
  const url = `./assets/data/grammys.json`;
  fetch(url)
    .then(r => r.json())
    .then(data => {
      // 把解析后的JSON数据存到全局变量里
      grammyData = data;
      console.log('JSON数据解析完成:', grammyData);
    })
    .catch(err => console.error('解析JSON失败:', err));
};

const init = () => {
  const $form = document.querySelector(`form`);
  $form.noValidate = true;
  $form.addEventListener(`submit`, handleSubmitForm);
  
  // 只在init里绑定一次change事件，避免重复绑定
  const $aantalGrammys = document.querySelector(`.aantalGrammys`);
  $aantalGrammys.addEventListener(`change`, handleChangeAmount);
  
  parseJson();
};

// 假设你有这个表单提交处理函数，可根据实际情况调整
const handleSubmitForm = (e) => {
  e.preventDefault();
  // 表单提交逻辑
};

init();

关键改动说明 #

• 新增全局变量grammyData，用来存储解析后的JSON数组，让事件处理函数能直接访问到
• 去掉重复的fetch调用，只保留一次请求，并在then里把数据赋值给grammyData
• 把事件绑定逻辑移到init函数里，只绑定一次，避免重复绑定导致的多次触发
• 在handleChangeAmount里，现在可以直接使用grammyData，并用Array.from完成数组转换/处理

这样你就能在change事件触发时，拿到选中的range值，同时使用解析好的JSON数组进行后续处理了。

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