从JSON文件获取数据如何每7条数据新建一个div并排列到下一行？

核心实现逻辑是先将从JSON获取的一维数据按7个为一组切割为二维数组，再遍历二维数组逐组渲染容器和内部数据即可，具体实现步骤如下：

• 1. 数组分组工具函数封装
     先实现通用的数组按固定长度拆分的方法，JS示例代码如下：

  function groupArray(sourceArr, groupSize = 7) {
    const result = []
    for (let i = 0; i < sourceArr.length; i += groupSize) {
      result.push(sourceArr.slice(i, i + groupSize))
    }
    return result
  }
  

• 2. 页面渲染逻辑实现
     根据你使用的技术栈选择对应的渲染方式即可：
  • 原生JS实现示例：

  // 已读取到的JSON源数据
  const jsonData = [/* 你的JSON数据 */]
  const groupedData = groupArray(jsonData, 7)
  const container = document.querySelector('.container')
  
  groupedData.forEach(group => {
    // 每组生成一个新的行容器
    const rowDiv = document.createElement('div')
    rowDiv.className = 'row-container'
    // 渲染组内的单条数据
    group.forEach(item => {
      const itemDiv = document.createElement('div')
      itemDiv.className = 'data-item'
      // 替换为你要展示的字段
      itemDiv.textContent = item.content
      rowDiv.appendChild(itemDiv)
    })
    container.appendChild(rowDiv)
  })
  

  • React JSX实现示例：

  const jsonData = [/* 你的JSON数据 */]
  const groupedData = groupArray(jsonData, 7)
  
  export default function DataList() {
    return (
      <div className="container">
        {groupedData.map((group, groupIdx) => (
          <div key={groupIdx} className="row-container">
            {group.map((item, itemIdx) => (
              <div key={itemIdx} className="data-item">
                {item.content}
              </div>
            ))}
          </div>
        ))}
      </div>
    )
  }
  

• 3. 布局样式补充
     增加CSS样式控制行和元素的排列效果：

  .row-container {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
  }
  .data-item {
    /* 7个元素均分宽度，减去间距占比 */
    flex: 0 0 calc(100% / 7 - 16px);
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
  }
  

如果数据总数不是7的整数倍，最后一行的元素会自动靠左排列，完全符合你要的展示效果。

内容的提问来源于stack exchange，提问作者Tolga Günaydın