Javascript 显示可过滤的JSON数据

我有JSON数据，这些数据以一周中的哪一天分隔

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

对于这个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>

---

您应该使用模板逻辑，如@Thimoty建议的，手动实现，因为您需要它是轻量级的。我正在做小提琴，我会尽快把它贴出来

就是这样：

HTML

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);
    }
});

---

Angularjs ngrepeat和过滤器可能适合您。。你怎么知道他在使用angular？我没有使用angular，但它听起来确实是一个值得研究的解决方案，除非它不值得只为这个特定的目的使用angular？angular是一个完整的框架，如果你只为这个目的使用它，它就不值得使用。我不知道他在使用angular。事实上我认为他没有，因为他没有提到。如果他提到他正在使用它，我会把它作为一个答案，而不仅仅是一个建议。哇，你真是太好了。谢谢@LoyaltyTechnologyAwesome！你介意告诉我一个可能的方法让它可以过滤吗？通过事件类中的任何文本？这就是我最大的问题所在。我在解析它时没有问题，只是不知道当我想过滤结果时如何解析它。这是另一个问题：但我会给你一个提示。首先接受答案。以下是更新的小提琴：。最简单的过滤是使用类，这样您可以添加几个条件，并为类型2的示例事件实现和逻辑，这些事件的描述中包含一些字符串。啊，这很有意义。如果我想拥有大量数据，那么创建一个完整的其他filterData数组似乎有点违反直觉。时间数组中将有10个对象，而不仅仅是数据。不过我真的很感谢你的帮助。我希望我不会表现得不感激。

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);
    }
});