如何将JSON文件转为JS对象并点击按钮修改probability值

首先，我们需要把JSON字符串解析成JavaScript对象，然后在按钮点击时修改其属性值。以下是完整的实现步骤：

1. 修正JSON加载函数，解析响应为JS对象 #

你的loadJSON当前返回的是原始JSON字符串，我们需要用JSON.parse()把它转成可操作的对象：

function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', './wheel_data.json', true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState === 4 && xobj.status === 200) {
      // 将JSON字符串解析为JavaScript对象
      const parsedData = JSON.parse(xobj.responseText);
      callback(parsedData);
    }
  };
  xobj.send(null);
}

2. 全局存储解析后的轮盘数据 #

为了让按钮点击事件能访问到这个数据，我们需要把它存在全局变量中，最好在页面DOM加载完成后再加载JSON：

// 全局变量，用于存储解析后的轮盘选项数组
let spinOptionData;

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  loadJSON(data => {
    spinOptionData = data.spinOptionArray;
    console.log('轮盘数据已加载：', spinOptionData);
  });
});

3. 给SPIN按钮绑定点击事件，修改概率值 #

现在我们可以给按钮添加点击逻辑，比如随机修改每个选项的概率，或者按照你的业务需求设置特定值：

// 获取按钮元素并绑定点击事件
const spinBtn = document.getElementById('spinBtn');
spinBtn.addEventListener('click', () => {
  // 先判断数据是否已加载完成
  if (!spinOptionData) {
    alert('轮盘数据还未加载，请稍等！');
    return;
  }

  // 遍历每个选项，修改probability值（示例：设置为随机1-100的整数）
  spinOptionData.forEach(option => {
    option.probability = Math.floor(Math.random() * 100) + 1;
    console.log(`${option.value} 新概率：`, option.probability);
  });

  // 👉 重要提示：前端无法直接修改本地JSON文件
  // 如果需要永久保存修改后的数据，你需要编写后端PHP接口，将修改后的对象转为JSON字符串，
  // 通过POST请求发送给后端，由后端代码写入wheel_data.json文件
});

额外说明 #

• 如果只是临时使用修改后的数据（页面刷新后不需要保留），上面的代码完全满足需求，修改的是内存中的JS对象，随时可以用于后续逻辑（比如渲染轮盘）。
• 若要永久保存修改，后端PHP示例代码（供参考）：

<?php
// 接收前端POST过来的json数据
$newData = json_decode(file_get_contents('php://input'), true);
if ($newData) {
  // 将数据写入wheel_data.json
  file_put_contents('./wheel_data.json', json_encode($newData));
  echo json_encode(['success' => true]);
} else {
  echo json_encode(['success' => false, 'msg' => '数据格式错误']);
}
?>

前端发送修改后数据的代码：

// 在按钮点击事件的修改逻辑后添加：
fetch('./save_data.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ spinOptionArray: spinOptionData }),
})
.then(response => response.json())
.then(result => {
  if (result.success) {
    console.log('数据已成功保存！');
  } else {
    console.error('保存失败：', result.msg);
  }
});

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