JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div id="holder">
    <li><a href="/SydneyTech/Mobile-Phones-/_i.html?_fsub=4&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Mobile Phones</a><span class="cnt"> (3)</span>

    </li>
    <ul class="lev2">
        <li><a href="/SydneyTech/Samsung-/_i.html?_fsub=1368384&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Samsung</a><span class="cnt"> (1)</span>

        </li>
        <li><a href="/SydneyTech/HTC-/_i.html?_fsub=228408419&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">HTC</a><span class="cnt"> (2)</span>

        </li>
    </ul>
    <li><a href="/SydneyTech/Mobile-Accessories-/_i.html?_fsub=3&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Mobile Accessories</a><span class="cnt"> (3)</span>

    </li>
    <ul class="lev2">
        <li><a href="/SydneyTech/Personal-Handsfree-/_i.html?_fsub=2748839&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Personal Handsfree</a><span class="cnt"> (1)</span>

        </li>
        <li><a href="/SydneyTech/Charger-/_i.html?_fsub=2748840&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Charger</a><span class="cnt"> (2)</span>

        </li>
    </ul>
    <li><a href="/SydneyTech/Computing-IT-/_i.html?_fsub=9&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Computing/IT</a><span class="cnt"> (3)</span>

    </li>
    <ul class="lev2">
        <li><a href="/SydneyTech/Webcams-Network-Cameras-/_i.html?_fsub=2726159&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Webcams &amp; Network Cameras</a><span class="cnt"> (1)</span>

        </li>
        <li><a href="/SydneyTech/Networking-/_i.html?_fsub=2726396&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Networking</a><span class="cnt"> (2)</span>

        </li>
    </ul>
    <li><a href="/SydneyTech/Laptops-Notebooks-/_i.html?_fsub=2642012&amp;_lns=1&amp;_sid=85623729&amp;_trksid=p4634.c0.m322">Laptops/Notebo​oks</a><span class="cnt"> (177)</span>

    </li>
    <ul class="lev2">
        <li><a...

JavaScript

$(document).ready(function () {
    var BASE = 'http://stores.ebay.com.au';

    function categoryToDict($node, dict) {
        dict.children = [];
        var latestParent = null;
        $node.children('li, ul').each(function () {
            var $this = $(this);
            if ($this.prop('tagName') == 'LI') {
                var newNode = {};
                var $a = $this.children('a');
                newNode.url = BASE + $a.attr('href').replace(/&.*$/,'');
                $a.attr('href',newNode.url);
                newNode.name = $this.children('a').text();
                newNode.total = +$this.children('span.cnt').text().replace(/\(|\)/g, '');
                dict.children.push(newNode);
                latestParent = newNode;
            } else if ($this.prop('tagName') == 'UL') {
                return categoryToDict($this, latestParent);
            }
        });
        return dict;
    }
    var dict = {
        name: 'root',
        total: '169'
    };
    $('#result').html(JSON.stringify(categoryToDict($('#holder'), dict)));
});