Javascript 使用jquery以动态矩阵格式显示数据

我将从webapi获得下面的json，我需要在UI上以矩阵格式显示这些数据。我该怎么做

json数据如下所示：

[
 {"ShippingLine_Cd":"AAC","SizeType_Cd":"20BU","ERIStatus_Cd":"Active","Shift_Nbr":"1"},
 {"ShippingLine_Cd":"ACL","SizeType_Cd":"20BU","ERIStatus_Cd" :"Active","Shift_Nbr":"2"},
 {"ShippingLine_Cd":"AMA","SizeType_Cd":"20DR","ERIStatus_Cd" :"Active","Shift_Nbr":"1"},
 {"ShippingLine_Cd":"ABC","SizeType_Cd":"20DR","ERIStatus_Cd" :"Pending","Shift_Nbr":"2"},
 {"ShippingLine_Cd":"CDE","SizeType_Cd":"20DR","ERIStatus_Cd" :"Pending","Shift_Nbr":"3"},
 {"ShippingLine_Cd":"AAC","SizeType_Cd":"20DR","ERIStatus_Cd" :"Active","Shift_Nbr":"1"},
 {"ShippingLine_Cd":"CDE","SizeType_Cd":"20BU","ERIStatus_Cd" :"Pending","Shift_Nbr":"1"}
]

这是所需的用户界面格式：

---

因为你的问题没有显示代码，所以我只会用伪代码回答，由你来编写真正的代码

您可以这样做（在第一次创建html表之后）：

---

您面临的问题是什么？我正在尝试循环数据以创建表。你能推荐一些参考来做这件事吗？还有其他方法吗？你可以a）写一些javascript来做这件事，或者b）搜索“jquery插件从数据创建表”或类似的东西，看看是否有一个现有的jquery插件适合你的需要。我已经尝试过了，你能给出更好的解决方案的建议吗。很好，但是我很困惑。我所做的是一件基本的事情，循环数据并创建表。有没有其他简单的方法可以做到这一点？在上面的解决方案中，我想显示切换控件而不是状态文本。我试过了，但它显示的是“娜娜娜”@RajuDonthula您的代码看起来足够简单，我不认为已经有任何针对您的特定数据集的解决方案。您可以尝试使用react/vue/angular之类的viewEngine，但您可能必须更改数据集以匹配视图

data.forEach(item => {
     var x = item.SizeType_Cd == ("20BU" ? 2 : 0) + item.Shift_Nbr;
     var y = 0; //some logic here to get the y coordinate
     table.children[y].chilren[x].text = item.ERIStatus_Cd; //set the status text
})