JSFiddle - React, Tailwind, and code Playground

by jezza

HTML

<div id='result'>
    <ul/>
</div>

JavaScript

$(function () {
    var before = [{
        a: 1,
        b: 2,
        keep: false
    }, {
        a: 9,
        b: 8,
        keep: true
    }, {
        a: 'a',
        b: 'b',
        keep: false
    }, {
        keep: true,
        a: -1
    }];


    var i = 1;

    var after = before.map(function (item) {
        if (item.keep) {
            return {
                z: item.a
            };
        } else {
            return undefined;
        }
    }).reduce(function (prev, item) {
        console.log(i++);
        console.log(prev);
        console.log(item);
        if (item) {
            if ($.isArray(prev)) {
                prev.push(item);
                return prev;
            } else if (prev) {
                return [prev, item];
            } else {
                return [item];
            }
        } else {
            if ($.isArray(prev)) {
                return prev;
            } else if (prev) {
                return [prev];
            } else {
                return prev;
            }

        }
    }).map(

    function (item) {
        $('#result ul').append(
        $('<li>').append(
        $('<a>').attr('href', '#').append(
        $('<span>').attr('class', 'tab').append(item.z))));
    });
});