JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<div id="graphite-add_form">
    <select></select>
</div>

JavaScript

var treeversal = function(cb, node) {

    // where we'll store our leaf nodes
    var data = [];

    // start constructing our uri
    var prefix = "";
    if (node == null) node = "";
    if (node === "") {
        prefix = "*";
    } else {
        prefix = node + ".*";
    }

    var uri = "http://graphite-jschulz.dixongroup.net/browser/usergraph/?query=" + prefix + "&format=treejson&contexts=1&path=" + node;

    // JSONP call to the Graphite /browser/ API
    return $.ajax({
        dataType: 'jsonp',
        jsonp: 'jsonp',
        error: function(xhr, textStatus, errorThrown) {
            console.log(errorThrown);
        },
        url: uri
    }).done(function(d) {
        for (var i = 0; i < d.length; i++) {
            if (d[i].leaf === 0) {
                // found a folder, recurse inside
                treeversal(cb, d[i].id); // <-- this is where shit blows up
            } else {
                // found a leaf node, save it
                if (d[i].id !== "no-click") data.push(d[i]);
            }
        }
        console.log(data);

        // return data to main
        if (data.length > 0) return cb(data);
    });
};

$("#graphite-add_form select").append(function() {
  treeversal(function(data) {
    var output = '<select>';
    for (var i = 0; i < data.length; i++) {
      output += '<option>' + data[i].id + "</option>\n";
    }
    return output;
  });
});