如何将动态JSON转换为HTML表格 [英] How to convert dynamic JSON to an HTML table
本文介绍了如何将动态JSON转换为HTML表格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个要求,即需要将任何JSON显示为HTML表格,并且可以尽可能轻松地对其进行格式化。
I have a requirement where I need to display any JSON as an HTML table, with the ability to format it as easily as possible.
如何使用PartialView以递归方式呈现任何表,以便查看大部分细节?
How would I go about using PartialView to render any table recursively so that most details can be seen?
推荐答案
我发现最好的方法是使用Newtonsoft.Json来动态分析数据并能够轻松地格式化。
I found the best way to do this would be using Newtonsoft.Json to dynamically parse the data and being able to format it easily.
主视图:
Main View:
@{
var converted = JsonConvert.DeserializeObject(Model.JsonData);
if (converted is JObject)
{
isMultiLevel = true;
}
else if (converted is JArray)
{
isSingleLevel = true;
}
}
@if (isMultiLevel)
{
Html.RenderPartial("Details_MultiLevelResult", Model);
}
else if (isSingleLevel) //might not be multiLevel nor singleLevel (if no data)
{
Html.RenderPartial("Details_SingleLevelResult", Model);
}
Details_MultiLevelResult:
Details_MultiLevelResult:
@{
JObject json = JsonConvert.DeserializeObject(Model.JsonData) as JObject;
}
<table class="display table table-striped table-bordered" cellspacing="0" style="background-color: white;">
<tbody>
@foreach (var property in json.Properties())
{
<tr>
<td><b>@property.Name</b></td>
<td>
@foreach (var data in property)
{
if (data.Type == JTokenType.Array)
{
<table class="table table-bordered">
<thead>
<tr>
@{
var firstProperty = data.First;
}
@if (firstProperty != null)
{
foreach (JProperty propertyData in firstProperty)
{
<th>@propertyData.Name</th>
}
}
</tr>
</thead>
<tbody>
@foreach (var propertyData in (data as JArray))
{
<tr>
@foreach (JProperty jProperty in propertyData)
{
if (jProperty.HasValues)
{
if (jProperty.Value.Type == JTokenType.Object)
{
var inlineClass = ((JObject)jProperty.Value).Properties();
var result = inlineClass.Select(x => string.Format("<div><b>{0}:</b><span> {1}</span></div>", x.Name, x.Value)).ToList();
string joinedResult = string.Join("", result);
<td>
<div>@Html.Raw(joinedResult)</div>
</td>
}
else
{
<td>@jProperty.Value</td>
}
}
}
</tr>
}
</tbody>
</table>
}
else if (data.Type == JTokenType.Object)
{
var uniqueClass = data as JObject;
<table class="table" style="background-color: white;">
<thead>
<tr>
@{
var classProperties = uniqueClass.Properties()
.Select(x => x.Name)
.ToList();
foreach (var classProperty in classProperties)
{
<th>@classProperty</th>
}
}
</tr>
</thead>
<tbody>
<tr>
@foreach (var classProperty in uniqueClass.Properties())
{
if (classProperty.Value.Type == JTokenType.Object)
{
var inlineClass = ((JObject)classProperty.Value).Properties();
var result = inlineClass.Select(x => string.Format("<div><b>{0}</b> <span>: {1}</span></div>", x.Name, x.Value)).ToList();
string joinedResult = string.Join("", result);
<td>
<div>@Html.Raw(joinedResult)</div>
</td>
}
else
{
<td>@classProperty.Value</td>
}
}
</tr>
</tbody>
</table>
}
else
{
@data
}
}
</td>
</tr>
}
</tbody>
</table>
Details_SingleLevelResult:
Details_SingleLevelResult:
@{
JArray jsonAsArray = JsonConvert.DeserializeObject(Model.JsonData) as JArray;
var classes = jsonAsArray
.OfType<JObject>()
.ToList();
var nonClasses = jsonAsArray
.Where(x => x.Type != JTokenType.Object)
.ToList();
}
<table class="table" style="background-color: white;">
<thead>
<tr>
@{
var anyClass = classes.FirstOrDefault();
if (anyClass != null)
{
var properties = anyClass.Properties().Select(x => x.Name).ToList();
foreach (var property in properties)
{
<th>@property</th>
}
}
else
{
<th>Data</th>
}
}
</tr>
</thead>
<tbody>
@foreach (JObject item in classes)
{
<tr>
@foreach (var property in item.Properties())
{
if (property.Value.Type == JTokenType.Array)
{
var model = new MyModel();
model.JsonData = property.Value.ToString();
<td>
@Html.Partial("Details_SingleLevelResult", model)
</td>
}
else if (property.Value.Type == JTokenType.Object)
{
var inlineClass = ((JObject)property.Value).Properties();
var resultado = inlineClass.Select(x => string.Format("<div><b>{0}</b> <span>: {1}</span></div>", x.Name, x.Value)).ToList();
string resultadoUnido = string.Join("", resultado);
<td>
<div>
@Html.Raw(resultadoUnido)
</div>
</td>
}
else
{
<td>@property.Value</td>
}
}
</tr>
}
@foreach (JValue item in nonClasses)
{
<tr>
<td>@item.Value</td>
</tr>
}
</tbody>
</table>
这篇关于如何将动态JSON转换为HTML表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文