How To Convert Dynamic Json To An Html Table

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. How would I go about using PartialView to render any

Solution 1:

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;
    }
    elseif (converted is JArray)
    {
        isSingleLevel = true;
    }
}

@if (isMultiLevel)
{
    Html.RenderPartial("Details_MultiLevelResult", Model);
}
elseif (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)
                        {
                            <tableclass="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;

                            <tableclass="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>

Solution 2:

publicclassMyClass
    {
        publicstring name { get; set; }
    }

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