JSFiddle - React, Tailwind, and code Playground

by jliberty

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="underscore">
    <div>
        <button id="createFilters">Create Filters</button>
        <button id="seeFilters">See Filters</button>
    </div>
    <div id="display"></div>
</div>

JavaScript

$("#createFilters").on("click", function () {
    filterWithUnderscore();
});

$("#seeFilters").on("click", function () {
    seeFilters();
});

var myData = [{
    bookId: 1,
    title: 'War and Peace',
    author: 'Tolstory',
    genre: 'Historical Fiction',
    rating: 5

}, {
    bookId: 2,
    title: 'As I Lay Dying',
    author: 'Faulkner',
    genre: 'Fiction',
    rating: 4
}, {
    bookId: 3,
    title: 'Book 2',
    author: 'Author 2',
    genre: 'Historical Fiction',
    rating: 3
}, {
    bookId: 4,
    title: 'Book 3',
    author: 'Author 3',
    genre: 'Historical Fiction',
    rating: 4
}, {
    bookId: 5,
    title: 'Book 4',
    author: 'Author 4',
    genre: 'Fiction',
    rating: 2
}, {
    bookId: 6,
    title: 'Anathem',
    author: 'Stephenson',
    genre: 'Fiction',
    rating: 5
}];

var booksToHide = [];

function filterWithUnderscore() {
    $("#display").empty();
    var sortedCollection = _.sortBy(myData, function (book) {
        return book.rating;
    });

    var reverseSortedCollection = sortedCollection.reverse();

    var grouped = _.groupBy(reverseSortedCollection, 'genre');

    var mappedArrays = _.map(grouped, function (theArray, key) {
        return _.rest(theArray);
    });

    var targetArray = _.flatten(mappedArrays);
    
    _.each(targetArray, function (book) {
        booksToHide.push({
            "field": 'bookId',
            "operator": 'neq',
            "value": book.bookId
        });
    });
}

function seeFilters() {

    $("#display").empty();
    _.each(booksToHide, function (f) {
        var html = "<div>" +
            "<div>" + f.field + "</div>" +
            "<div>" + f.operator + "</div>" +
            "<div>" + f.value + "</div>" +
            "</div>";
        $("#display").append(html);
    });
}