如何将JSON数据显示在表格的textbox输入框中？

你当前代码的核心问题是把输入框的内容放在了input标签外部，而且input的type属性值错误，同时没有处理特殊数据类型（比如null、数组、布尔值）的显示逻辑。以下是修正后的方案：

关键修正点 #

• input标签是自闭合元素，不需要</input>结束标签，正确的type属性是text（不是textbox）。
• 要把JSON数据放到输入框的value属性中，而不是标签外部。
• 对特殊数据做处理：
  • null值转为空字符串，避免输入框显示"null"
  • 数组转为逗号分隔的字符串，提升可读性
  • 布尔值转为字符串显示（比如false直接显示为"false"）

修正后的JavaScript代码 #

let table = document.getElementById("table");
fetch("veri.json")
  .then(res => res.json())
  .then(veri => {
    // 直接遍历kisiler数组，无需外层for...in循环
    for (const deger of veri.kisiler) {
      // 处理特殊数据格式
      const maas = deger.maas ?? ""; // null转为空字符串
      const hobi = Array.isArray(deger.hobi) ? deger.hobi.join(", ") : deger.hobi;
      const emekli = String(deger.emekli); // 布尔值转字符串

      table.innerHTML += `<tr>
        <td><input type="text" value="${deger.ad}"></td>
        <td><input type="text" value="${deger.soyad}"></td>
        <td><input type="text" value="${deger.yas}"></td>
        <td><input type="text" value="${emekli}"></td>
        <td><input type="text" value="${maas}"></td>
        <td><input type="text" value="${hobi}"></td>
      </tr>`;
    }
  });

额外安全提示 #

如果你的JSON数据可能包含特殊字符（比如引号、尖括号），直接拼接HTML字符串存在XSS风险，建议用创建DOM元素的方式添加内容：

// 示例：更安全的DOM创建方式
fetch("veri.json")
  .then(res => res.json())
  .then(veri => {
    for (const deger of veri.kisiler) {
      const tr = document.createElement('tr');
      // 封装创建输入框的函数
      const createInputTd = (value) => {
        const td = document.createElement('td');
        const input = document.createElement('input');
        input.type = 'text';
        input.value = value ?? "";
        td.appendChild(input);
        return td;
      };
      tr.appendChild(createInputTd(deger.ad));
      tr.appendChild(createInputTd(deger.soyad));
      tr.appendChild(createInputTd(deger.yas));
      tr.appendChild(createInputTd(String(deger.emekli)));
      tr.appendChild(createInputTd(deger.maas));
      tr.appendChild(createInputTd(Array.isArray(deger.hobi) ? deger.hobi.join(", ") : deger.hobi));
      table.appendChild(tr);
    }
  });

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