如何用Object.entries处理JSON文件并在HTML中动态生成<div>

情况1：Node.js后端读取文件并生成HTML #

如果是用Node.js做后端，先读取文件夹内的JSON文件、解析数据，再生成对应HTML内容输出。

修正后的Node.js代码 #

const fs = require('fs');
const path = require('path');

const dosya = { bilgi: [], sayi: 0, veri: [] };
const folderPath = './bilgiler/kisi-bilgiler/';

// 读取文件夹
fs.readdir(folderPath, (err, files) => {
  if (err) {
    console.error('文件夹读取失败:', err);
    return;
  }

  dosya.sayi = files.length;
  console.log('文件总数:', dosya.sayi);

  // 遍历文件，读取并解析JSON
  files.forEach(file => {
    const filePath = path.join(folderPath, file);
    try {
      const fileContent = fs.readFileSync(filePath, 'utf8');
      const jsonData = JSON.parse(fileContent);
      // 提取个人信息存入数组
      dosya.bilgi.push(jsonData.data.kisisel_bilgiler);
    } catch (parseErr) {
      console.error(`解析文件${file}出错:`, parseErr);
    }
  });

  // 生成HTML的div模块
  let htmlDivs = '';
  dosya.bilgi.forEach((kisi, index) => {
    htmlDivs += `
      <div class="kisi-karti" id="kisi-${index}">
        <h3>${kisi.isim} ${kisi.soyisim}</h3>
        <p>İsim: ${kisi.isim}</p>
        <p>Soyisim: ${kisi.soyisim}</p>
      </div>
    `;
  });

  // 拼接完整HTML并写入文件
  const fullHtml = `
    <!DOCTYPE html>
    <html lang="tr">
    <head>
      <meta charset="UTF-8">
      <title>Kişi Bilgileri</title>
      <style>
        .kisi-karti { border: 1px solid #ccc; padding: 15px; margin: 10px; border-radius: 8px; }
      </style>
    </head>
    <body>
      <h1>Kişi Listesi</h1>
      ${htmlDivs}
    </body>
    </html>
  `;

  fs.writeFileSync('./sonuc.html', fullHtml);
  console.log('HTML文件已生成: sonuc.html');
});

情况2：浏览器前端读取用户选择的文件夹 #

如果要在浏览器中实现，得用浏览器的File API让用户手动选择文件夹，再读取解析文件并生成div。

前端HTML+JS代码 #

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Kişi Bilgileri Yükle</title>
  <style>
    .kisi-karti { border: 1px solid #ccc; padding: 15px; margin: 10px; border-radius: 8px; }
  </style>
</head>
<body>
  <input type="file" id="folderInput" webkitdirectory directory multiple>
  <div id="bilgilerContainer"></div>

  <script>
    const folderInput = document.getElementById('folderInput');
    const bilgilerContainer = document.getElementById('bilgilerContainer');

    folderInput.addEventListener('change', async (e) => {
      const files = Array.from(e.target.files);
      const dosya = { bilgi: [], sayi: files.length, veri: [] };

      // 遍历选中的文件
      for (const file of files) {
        // 只处理JSON文件
        if (!file.name.endsWith('.json')) continue;

        try {
          const fileContent = await file.text();
          const jsonData = JSON.parse(fileContent);
          dosya.bilgi.push(jsonData.data.kisisel_bilgiler);
        } catch (err) {
          console.error(`解析文件${file.name}出错:`, err);
        }
      }

      // 生成并插入div元素
      bilgilerContainer.innerHTML = '';
      dosya.bilgi.forEach((kisi, index) => {
        const div = document.createElement('div');
        div.className = 'kisi-karti';
        div.innerHTML = `
          <h3>${kisi.isim} ${kisi.soyisim}</h3>
          <p>İsim: ${kisi.isim}</p>
          <p>Soyisim: ${kisi.soyisim}</p>
        `;
        bilgilerContainer.appendChild(div);
      });

      console.log('处理完成，文件总数:', dosya.sayi);
    });
  </script>
</body>
</html>

原代码的问题说明 #

• 环境混淆：fs是Node.js专属模块，浏览器环境无法直接使用，前端场景必须用浏览器的File API
• 未解析JSON：原代码只是把文件的字符串内容存入数组，没有解析成JSON对象，无法直接提取isim和soyisim
• 异步写法错误：用async修饰forEach的回调毫无意义，forEach不会等待异步操作完成，即使这里用了同步的readFileSync，写法也不规范

内容的提问来源于stack exchange，提问作者Thesselia's