帮我写一个前面带有按钮后面是json渲染的数据，点击按钮页面弹出所对应的id

当你点击按钮时，页面将弹出相应的id。你可以使用以下代码实现：

HTML部分：

<div>
  <button id="myButton">点击我</button>
</div>
<div id="jsonData"></div>

JavaScript部分：

// 模拟的 JSON 数据
const jsonData = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

// 获取按钮和数据展示区域的元素
const button = document.getElementById('myButton');
const dataContainer = document.getElementById('jsonData');

// 点击按钮时的处理函数
button.addEventListener('click', () => {
  // 弹出相应的id
  const id = button.dataset.id;
  alert(`点击了ID为${id}的按钮！`);
});

// 渲染 JSON 数据到页面
function renderData() {
  // 清空数据展示区域
  dataContainer.innerHTML = '';

  // 遍历 JSON 数据并渲染到页面
  jsonData.forEach(item => {
    const button = document.createElement('button');
    button.textContent = item.name;
    button.dataset.id = item.id;
    dataContainer.appendChild(button);
  });
}

// 初始化页面
renderData();

在上述代码中，我们首先定义了一个模拟的JSON数据，其中包含了id和name字段。然后，我们获取按钮和数据展示区域的元素，并给按钮添加了一个点击事件处理函数。当点击按钮时，处理函数会获取按钮上的`data-id`属性值，并弹出对应的id。

接下来，我们定义了一个`renderData()`函数，用于将JSON数据渲染到页面。在该函数中，我们先清空数据展示区域，然后遍历JSON数据，并为每个数据项创建一个按钮，按钮的文本内容为对应的name字段，同时将id保存在`data-id`属性中。最后，我们调用`renderData()`函数来初始化页面。

这样，当你点击按钮时，页面将弹出相应的id。你可以根据实际需求修改JSON数据和页面展示的内容。