我有json文件，用fetch获取json文件，json文件有两个数组G1G2，我想要通过按钮分别显示两个数组，并通过表格方式输出，每20行换页

在JavaScript中，你可以使用Fetch API来从JSON文件获取数据，然后配合前端模板如HTML和JavaScript处理数据展示。以下是一个基本步骤的示例：

1. **加载JSON文件**:
使用`fetch`函数并传入JSON文件的URL，通常返回一个Promise，可以解析响应内容：

async function fetchData() {
  const response = await fetch('path_to_your_json_file.json');
  if (response.ok) {
    const data = await response.json();
    return data;
  } else {
    throw new Error(`Error fetching data: ${response.statusText}`);
  }
}

2. **处理数据**:
获取到数据后，你需要分开处理`G1`和`G2`数组：

const jsonData = await fetchData();

const g1Array = jsonData.G1;
const g2Array = jsonData.G2;

3. **创建分页表格**:
创建两个表格元素，每个表对应一个数组。例如，使用`<table>`、`<thead>`、`<tbody>`以及`<button>`元素：

<button onclick="showG1()">显示 G1</button>
<button onclick="showG2()">显示 G2</button>

<table id="g1Table">
  <thead>
    <!-- 表头信息 -->
  </thead>
  <tbody id="g1Tbody"></tbody>
</table>

<table id="g2Table">
  <!-- 同理，这里替换为G2的数据 -->
</table>

4. **动态渲染表格**:
分别编写`showG1()`和`showG2()`函数，遍历数组并生成表格行，每20行插入一个新的`<tbody>`标签：

function showG1() {
  let startIndex = 0;
  const maxRowsPerPage = 20;
  
  while (true) {
    const endIndex = startIndex + maxRowsPerPage;
    
    // ...假设你已经有了将数组转换成表格行的函数arrayToRows(g1Array, startIndex, endIndex)
    const rows = arrayToRows(g1Array, startIndex, endIndex);
    
    if (!rows.length) break; // 如果没有更多行了，则停止

    document.getElementById('g1Tbody').innerHTML += rows.join('');
    startIndex = endIndex; // 更新起始索引
  }
}

// 类似地，为showG2()函数做同样的事情

5. **数组转表格行函数**:
这里需要你自己实现，通常会把数组项转化为`<tr>`标签，添加到表格中。

记得根据实际需求调整代码细节，特别是如果你的JSON结构或数据变化较大时。