如何將動態JSON轉換爲HTML表格

Question

我有一個需求，即需要將任何JSON顯示爲HTML表格，並且能夠儘可能輕鬆地進行格式化。

我將如何去使用PartialView遞歸地呈現任何表格，以便可以看到大多數細節？

Answer 1

我發現最好的方法是使用Newtonsoft.Json來動態分析數據並能夠輕鬆地進行格式化。

主視圖：

@{ 
    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：

@{ 
    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：

@{ 
    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> 

Answer 2

public class MyClass 
    { 
     public string name { get; set; } 
    } 

    var converted = JsonConvert.DeserializeObject<MyClass>(Json);