Any recommended HTML reports which use the generated JSON?

I was looking unsuccessfully for one myself... so I wrote a simple one just now. All it does, is a visually friendly display of the report's JSON file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Validation report</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    <style>
        [href]:after {
            content: attr(title)
        }
    </style>
</head>

<body style="background-color: #e5e5e5; padding: 1%">
    <div class="container-fluid">
        <div class="row">
            <h1>Validation report</h1>
            <div id="results"></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
        + function ($) {
            'use strict';
            $(function () {
                var reload = function () {
                    $.ajax('validation-report.json')
                        .done(function (data) {
                            var $r = $('<div/>')
                            $.each(data, function (index, item) {
                                var $item = $('<h2>').html('<p class="small">filename: </p>' + item.filename).appendTo($r).wrap('<div class="col-sm-4 well"/>').parent()
                                if(index % 3 === 2) $('<div class="clearfix"></div>').appendTo($r)
                                $.each(item.error, function (ind, msg) {
                                    var $list = $('<div class="list-group"/>').appendTo($item)
                                    $.each(msg, function (key, desc) {
                                        var $i = $('<div class="list-group-item"/>').appendTo($list)
                                        $i.html('<strong>' + key + ':</strong> ' + desc).find('h1, h2').replaceWith(function () {
                                            return $('<h3/>').append($(this).contents())
                                        })
                                        if(msg.type === 'error') $i.addClass('list-group-item-danger')
                                    })
                                })

                            })
                            $('#results').empty().append($r)
                        })
                }

                setInterval( reload, 1000 )
                reload()

            })
        }(jQuery)
    </script>
</body>

</html>

It uses Bootstrap and jQuery from CDNs, so there is no setup needed to run it. It assumes the HTML file is in the same directory as the "validation-report.json" file. If you prefer to put it elsewhere, just change the argument of $.ajax(). The output is refreshed automatically every second. If you prefer some different interval just change the second argument of setInterval() function.

Anybody interested is free to copy and use this code.

praveenvijayan / grunt-html-validation

Any recommended HTML reports which use the generated JSON? #49