显示可过滤的 JSON 数据

Question

我有按星期几分隔的 JSON 数据。

如果数据只是按日期列出而不是按天在它自己的数组中列出，我通常会使用数据表以便它可以过滤。但是，我正在尝试分离数据，使其具有标题，如下所示：

有了这个 json 数据，我不确定如何使用数据表来执行此操作并使其可过滤。有没有人有任何建议（插件等）我应该用来在可过滤的环境中以我想要的方式显示数据？

这最终是我想要显示数据的方式：

<div id="day_of_week">August 26, 2014</div>
<div id="event">
    <span id="time">5:52 AM</span>
    <span id="event_name">Page View</span>
    <div id="hidden_data">Data: Goes here</div>
</div>

Answer 1

你应该使用模板逻辑，就像@Thimoty 建议的那样，手动实现很难，因为你需要它是轻量级的。我正在制作小提琴，我会尽快发布。

就是这样：http://jsfiddle.net/23e37v18/

HTML

 <div id="content">
    </div>
    <div id="template" style="display: none">
    <div class="day_of_week">August 26, 2014</div>
    <div class="event">
        <span class="time"></span>
        <span class="event_name"></span>
        <div class="hidden_data"></div>
    </div>
    </div>

jQuery

var jsonText = '{"August 23, 2014":{"1409069553":{"Data":"Your event"},"1407859953 ":{"Data":"Your event"},"1399911153":{"Data":"Your event"}},"August 24, 2014":{"1409069553":{"Data":"Your event"},"1399911139 ":{"Data":"Your event"},"1399914139":{"Data":"Your event"}},"August 25, 2014":{"1407859953 ":{"Data":"Your event"}}}';

$(document).ready(function(){
    var data = JSON.parse(jsonText);
    for (var day in data){
        $('#content').append(day + '<br/>');
        // create block
        var blockData = data[day];
        var block = $('<div/>').addClass('event_block');

        for (var event in blockData){
            // your event block
            var eventDOM = $('#template .event').clone();

            // add content
            var date = new Date(event*1000)
            // TODO: format date for display
            $('.time', eventDOM).append(date);
            $('.time', eventDOM).append(blockData[event].Data);
            block.append(eventDOM);
        }

        $('#content').append(block);
    }
});