JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

JavaScript

var data = [
    { id: 1, parent: null, pos: '', content: 'parent' },
    { id: 2, parent: 1, pos: 'L', content: 'child' },
    { id: 3, parent: 1, pos: 'R', content: 'child' },
    { id: 4, parent: 2, pos: 'L', content: 'grand child' },
    { id: 5, parent: 2, pos: 'R', content: 'grand child' },
    { id: 6, parent: 3, pos: 'L', content: 'grand child' },
    { id: 7, parent: 3, pos: 'R', content: 'grand child' }
];

function tree(parent, level) {

    function findRow(p, pos) {
        var id;
        data.some(function (r, i) {
            return r.parent === p && r.pos === pos ? (id = i, true) : false;
        });
        return id;
    }

    function procRow(r) {
        document.write('<li>');
        document.write(data[r].content + ' ' + data[r].id + ' ' + data[r].pos + ' ' + level);
        tree(data[r].id, level + 1);
        document.write('</li>');
    }

    document.write('<ul>');
    ['', 'L', 'R'].forEach(function (l) {
        var row = findRow(parent, l);
        data[row] && procRow(row);
    });
    document.write('</ul>');
}

tree(null, 0);