使用vanilla javascript显示表中包含图像的嵌套json

// 嵌套的JSON数据
var jsonData = {
  "data": [
    {
      "name": "John",
      "age": 25,
      "image": "https://example.com/image1.jpg"
    },
    {
      "name": "Jane",
      "age": 30,
      "image": "https://example.com/image2.jpg"
    }
  ]
};

// 解析JSON数据
var data = JSON.parse(JSON.stringify(jsonData));

// 创建表格
var table = document.createElement("table");

// 添加表头
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
var headers = ["Name", "Age", "Image"];

headers.forEach(function(header) {
  var th = document.createElement("th");
  th.textContent = header;
  headerRow.appendChild(th);
});

thead.appendChild(headerRow);
table.appendChild(thead);

// 遍历JSON数据
data.data.forEach(function(item) {
  var row = document.createElement("tr");

  // 添加表格单元格
  Object.values(item).forEach(function(value) {
    var cell = document.createElement("td");

    // 处理图像
    if (value.includes("https://")) {
      var img = document.createElement("img");
      img.src = value;
      img.style.width = "50px";
      cell.appendChild(img);
    } else {
      cell.textContent = value;
    }

    row.appendChild(cell);
  });

  table.appendChild(row);
});

// 将表格添加到页面中的某个元素
var container = document.getElementById("table-container");
container.appendChild(table);