使用javascript在html页面上的卡片中动态打印使用json接收的结果

我的目标是使用javascript动态创建多个卡片，我通过JSON获取这些卡片的数据

下面是JSON中显示的示例数据

var appStatus = 
[  
   {  
      "app":"Application A",
      "category":"Overall Status",
      "status":"1"
   },
   {  
      "app":"Application A",
      "category":"System Status",
      "status":"2"
   },
   {  
      "app":"Application B",
      "category":"Overall Status",
      "status":"1"
   },
   {  
      "app":"Application B",
      "category":"Overall Status",
      "status":"2"
   }
]

状态1/2/3表示绿色/黄色/红色，我可以在javascript中修改。有没有一种方法可以满足这个练习，而不必在卡片中创建表格？或者可以通过其他方式分享，但这需要显示为卡片

.卡体{ 填充：40雷姆0.25雷姆； 页边距底部：0； } .名片名称{ 保证金上限：0.50雷姆； 边缘底部：.1rem； } .海关卡{ 高度：250px； } .卡头{ 填充：40雷姆0.25雷姆； 页边距底部：0； 背景色：01233F； 边框底部：1px实心rgba0,0,0,125； 颜色：fff； } 应用程序A 系统可用性 应用程序B 系统可用性 更多选择 你必须签出文档。createElement'div'

createElement是本机javascript方法，它将动态生成您选择的html元素。然后，您可以将该元素附加到您喜欢的任何父元素。您可以像这样在对象中循环

function renderCards(){
  for(var i = 0; i < appStatus.length; i++){
        var div = document.createElement('div');
        div.className = 'card-body';
        div.innerHTML = appStatus[i].app;
        document.getElementsByTagName('body')[0].appendChild(div);
  }
}

您可以将appendChild添加到要用作数据卡父级的任何元素中。您需要修改此脚本，使其与您的目标协调，因为这只是一个代码概念

但这正是您正在寻找的动态特性——以标准Javascript方式