如何在JavaScript中为JSON/XML数据生成MLM（多级营销）树

我有一些数据如下： （在sql sERVER上）

现在我想要这样的构建： 只使用JS。 以上数据可以JSON/XML/CSV/格式的文本形式传递 如何仅在JS中生成这样的动态树？ 请不要推荐PHP/.NET解决方案。

---

我更喜欢JQuery。

我不确定这段代码是否会运行，我只是在这里输入，没有测试。我希望这就是你想要的。（顺便说一句，我对数组搜索的循环有传统的风格。我上次使用javascript已经很久了。所以我需要参考w3schools了解数组函数。：-P）

var str=[
{memberID:1，parentId:null，amount:200，otherInfo:“blah”}，
{memberID:2，parentId:1，amount:300，otherInfo:“blah1”}，
{memberID:3，parentId:1，amount:400，otherInfo:“blah2”}，
{memberID:4，parentId:3，amount:500，otherInfo:“blah3”}
];
（来自阵列（arr）的函数）{
var getElemByParent=函数（父级）{
变量元素=[]；
对于（var i=0；i和，这里是：



显然，你会想自己设计它。但这应该让你开始：

var members = [
    {memberId : 1, parentId:null, amount:200, otherInfo:"blah"},
    {memberId : 2, parentId:1, amount:300, otherInfo:"blah1"},
    {memberId : 3, parentId:1, amount:400, otherInfo:"blah2"},
    {memberId : 4, parentId:3, amount:500, otherInfo:"blah3"},
    {memberId : 6, parentId:1, amount:600, otherInfo:"blah4"},
    {memberId : 9, parentId:4, amount:700, otherInfo:"blah5"},
    {memberId : 12, parentId:2, amount:800, otherInfo:"blah6"},
    {memberId : 5, parentId:2, amount:900, otherInfo:"blah7"},
    {memberId : 13, parentId:2, amount:0, otherInfo:"blah8"},
    {memberId : 14, parentId:2, amount:800, otherInfo:"blah9"},
    {memberId : 55, parentId:2, amount:250, otherInfo:"blah10"},
    {memberId : 56, parentId:3, amount:10, otherInfo:"blah11"},
    {memberId : 57, parentId:3, amount:990, otherInfo:"blah12"},
    {memberId : 58, parentId:3, amount:400, otherInfo:"blah13"},
    {memberId : 59, parentId:6, amount:123, otherInfo:"blah14"},
    {memberId : 54, parentId:6, amount:321, otherInfo:"blah15"},
    {memberId : 53, parentId:56, amount:10000, otherInfo:"blah7"},
    {memberId : 52, parentId:2, amount:47, otherInfo:"blah17"},
    {memberId : 51, parentId:6, amount:534, otherInfo:"blah18"},
    {memberId : 50, parentId:9, amount:55943, otherInfo:"blah19"},
    {memberId : 22, parentId:9, amount:2, otherInfo:"blah27"},
    {memberId : 33, parentId:12, amount:-10, otherInfo:"blah677"}

];
var testImgSrc = "http://0.gravatar.com/avatar/06005cd2700c136d09e71838645d36ff?s=69&d=wavatar";
(function heya( parentId ){
    // This is slow and iterates over each object everytime.
    // Removing each item from the array before re-iterating 
    // may be faster for large datasets.
    for(var i = 0; i < members.length; i++){
        var member = members[i];
        if(member.parentId === parentId){
            var parent = parentId ? $("#containerFor" + parentId) : $("#mainContainer"),
                memberId = member.memberId,
                    metaInfo = "<img src='"+testImgSrc+"'/>" + member.otherInfo + " ($" + member.amount + ")";
            parent.append("<div class='container' id='containerFor" + memberId + "'><div class='member'>" + memberId + "<div class='metaInfo'>" + metaInfo + "</div></div></div>");
            heya(memberId);
        } 
    }
 }( null ));

// makes it pretty:
// recursivley resizes all children to fit within the parent.
var pretty = function(){
    var self = $(this),
        children = self.children(".container"),
        // subtract 4% for margin/padding/borders.
        width = (100/children.length) - 2;
    children
        .css("width", width + "%")
        .each(pretty);

};
$("#mainContainer").each(pretty);

var成员=[
{memberId:1，parentId:null，amount:200，otherInfo:“blah”}，
{memberId:2，parentId:1，amount:300，otherInfo:“blah1”}，
{memberId:3，parentId:1，amount:400，otherInfo:“blah2”}，
{memberId:4，parentId:3，amount:500，otherInfo:“blah3”}，
{memberId:6，parentId:1，amount:600，otherInfo:“blah4”}，
{memberId:9，parentId:4，amount:700，otherInfo:“blah5”}，
{memberId:12，parentId:2，amount:800，otherInfo:“blah6”}，
{memberId:5，parentId:2，amount:900，otherInfo:“blah7”}，
{memberId:13，parentId:2，amount:0，otherInfo:“blah8”}，
{memberId:14，parentId:2，amount:800，otherInfo:“blah9”}，
{memberId:55，parentId:2，amount:250，otherInfo:“blah10”}，
{memberId:56，parentId:3，amount:10，otherInfo:“blah11”}，
{memberId:57，parentId:3，amount:990，otherInfo:“blah12”}，
{memberId:58，parentId:3，amount:400，otherInfo:“blah13”}，
{memberId:59，parentId:6，amount:123，otherInfo:“blah14”}，
{memberId:54，parentId:6，amount:321，otherInfo:“blah15”}，
{memberId:53，parentId:56，amount:10000，otherInfo:“blah7”}，
{memberId:52，parentId:2，amount:47，otherInfo:“blah17”}，
{memberId:51，parentId:6，amount:534，otherInfo:“blah18”}，
{memberId:50，parentId:9，amount:55943，otherInfo:“blah19”}，
{memberId:22，parentId:9，amount:2，otherInfo:“blah27”}，
{memberId:33，parentId:12，amount:-10，otherInfo:“blah677”}
];
var testImgSrc=”http://0.gravatar.com/avatar/06005cd2700c136d09e71838645d36ff?s=69&d=wavatar";
（函数heya（parentId）{
//这很慢，每次都会在每个对象上迭代。
//在重新迭代之前从数组中删除每个项
//对于大型数据集，速度可能更快。
对于（var i=0；i

这决不是一个最优的解决方案。开始加载的数据越多，第一个循环将成为性能的噩梦。
您可以发布一些代码吗。客户端如何接收数据？谢谢您的回答。但是我们不能有一个树结构。您的JSFIDLE链接只显示线性结构。我正在寻找树结构。Lookin我只在Chrome的开发频道进行了测试。很抱歉。IE8可能在边距或浮动或其他方面有问题。哦，是的，请确保您没有任何循环引用，例如，
var members=[{memberId:1，parentId:2}，{memberId:2，parentId:1}]
正如我想象的那样，我给你的代码会让你享受锁定浏览器一段时间的乐趣。：-）你能告诉我吗。我怎样才能像这样将数据从PHP发送到javascript？
var str = [
{memberID : 1, parentId:null, amount:200, otherInfo:"blah"},
{memberID : 2, parentId:1, amount:300, otherInfo:"blah1"},
{memberID : 3, parentId:1, amount:400, otherInfo:"blah2"},
{memberID : 4, parentId:3, amount:500, otherInfo:"blah3"}
];
(function fromArray(arr){
 var getElemByParent = function(parent){
  var elems = [];
  for (var i=0; i<arr.length; i++){
   if (arr[i].parentId == parent)
    elems.push(arr[i]);
  }
  return elems;
 }
 var finalObj;
 var enumFunction = function(node){
  node.siblings = getElemByParent(node.memberID);
  for (var i=0;i<node.siblings.length; i++)
   enumFunction(node.siblings[i]);
 }
 finalObj = getElemByParent(null);
 enumFunction(finalObj);
 console.log(finalObj);
 return finalObj;
})(str);

var members = [
    {memberId : 1, parentId:null, amount:200, otherInfo:"blah"},
    {memberId : 2, parentId:1, amount:300, otherInfo:"blah1"},
    {memberId : 3, parentId:1, amount:400, otherInfo:"blah2"},
    {memberId : 4, parentId:3, amount:500, otherInfo:"blah3"},
    {memberId : 6, parentId:1, amount:600, otherInfo:"blah4"},
    {memberId : 9, parentId:4, amount:700, otherInfo:"blah5"},
    {memberId : 12, parentId:2, amount:800, otherInfo:"blah6"},
    {memberId : 5, parentId:2, amount:900, otherInfo:"blah7"},
    {memberId : 13, parentId:2, amount:0, otherInfo:"blah8"},
    {memberId : 14, parentId:2, amount:800, otherInfo:"blah9"},
    {memberId : 55, parentId:2, amount:250, otherInfo:"blah10"},
    {memberId : 56, parentId:3, amount:10, otherInfo:"blah11"},
    {memberId : 57, parentId:3, amount:990, otherInfo:"blah12"},
    {memberId : 58, parentId:3, amount:400, otherInfo:"blah13"},
    {memberId : 59, parentId:6, amount:123, otherInfo:"blah14"},
    {memberId : 54, parentId:6, amount:321, otherInfo:"blah15"},
    {memberId : 53, parentId:56, amount:10000, otherInfo:"blah7"},
    {memberId : 52, parentId:2, amount:47, otherInfo:"blah17"},
    {memberId : 51, parentId:6, amount:534, otherInfo:"blah18"},
    {memberId : 50, parentId:9, amount:55943, otherInfo:"blah19"},
    {memberId : 22, parentId:9, amount:2, otherInfo:"blah27"},
    {memberId : 33, parentId:12, amount:-10, otherInfo:"blah677"}

];
var testImgSrc = "http://0.gravatar.com/avatar/06005cd2700c136d09e71838645d36ff?s=69&d=wavatar";
(function heya( parentId ){
    // This is slow and iterates over each object everytime.
    // Removing each item from the array before re-iterating 
    // may be faster for large datasets.
    for(var i = 0; i < members.length; i++){
        var member = members[i];
        if(member.parentId === parentId){
            var parent = parentId ? $("#containerFor" + parentId) : $("#mainContainer"),
                memberId = member.memberId,
                    metaInfo = "<img src='"+testImgSrc+"'/>" + member.otherInfo + " ($" + member.amount + ")";
            parent.append("<div class='container' id='containerFor" + memberId + "'><div class='member'>" + memberId + "<div class='metaInfo'>" + metaInfo + "</div></div></div>");
            heya(memberId);
        } 
    }
 }( null ));

// makes it pretty:
// recursivley resizes all children to fit within the parent.
var pretty = function(){
    var self = $(this),
        children = self.children(".container"),
        // subtract 4% for margin/padding/borders.
        width = (100/children.length) - 2;
    children
        .css("width", width + "%")
        .each(pretty);

};
$("#mainContainer").each(pretty);