javascript - 带有子项的数组 - 以父子层次结构的形式显示它

Question

我有步骤#1中所示的数据，我想根据“id”以父级和相应子级的形式重新排列它，如步骤#2中所示:

step#1:                                                                                             
[
    {"id": "card:1.usa", "name": "usa"}, {"id": "card:2", "name": "card2"}, {"id": "card:1", "name": "card1"}, {"id": "card:2.washington", "name": "washington"},
    {"id": "card:1.usa.illinios", "name": "illinios"}, {"id": "card:1.usa.illinios.city1", "name": "chicago"}
]

step#2 :   
[
    {"id": "card:1", "name": "card1", "children": [ {"id": "card:1.usa", "name": "usa", "children":[ {"id": "card:1.usa.illinios", "name": "illinios", "children":[ {"id": "card:1.usa.illinios.city1", "name": "chicago"}] }] }    },
    {"id": "card:2", "name": "card2", "children": [ {"id": "card:2.washington", "name": "washington" }] }
]

我尝试从我这边执行以下操作，但这仅适用于第一级 child :

var cardData = [
    {"id": "card:1.usa", "name": "usa"}, {"id": "card:2", "name": "card2"}, {"id": "card:1", "name": "card1"}, {"id": "card:2.washington", "name": "washington"},
    {"id": "card:1.usa.illinios", "name": "illinios"}, {"id": "card:1.usa.illinios.city1", "name": "chicago"}
]
var subCardList = [];
$scope.parentCard = [];
for(var i=0; i<cardData.length; i++){
    if( cardData[i].id.indexOf('.') > -1){
        subCardList.push( cardData[i] );
    }
}
for(var i=0; i<cardData.length; i++){
    for(var j=0; j<subCardList.length; j++){
        var cardObj = {};
        if( cardData[i].id == subCardList[j].id.substr(0, subCardList[j].id.indexOf('.')) ){ //found matching parent card
            cardObj.id = cardData[i].id;
            cardObj.children = subCardList[j];
            $scope.parentCard.push( cardObj );
        }
    }
}

请告诉我如何通过 javascript/jquery 实现此目的？

Answer 1

我改进了我的解决方案，使其更加全面，并且还可以处理层次结构中的所有卡片不存在且顺序不同的情况。

处理前根据id对子卡数组进行排序。这确保了卡片的顺序不会破坏此代码。

首先收集所有顶级卡牌。然后将每个子卡放入桶中( child 集合)。

我提供了额外的数据集 (cardData1) 来突出显示边界条件。

如果您需要更多解释，请告诉我。

var cardData = [{
    "id": "card:1.usa",
    "name": "usa"
}, {
    "id": "card:2",
    "name": "card2"
}, {
    "id": "card:1",
    "name": "card1"
}, {
    "id": "card:2.washington",
    "name": "washington"
}, {
    "id": "card:1.usa.illinios",
    "name": "illinios"
}, {
    "id": "card:1.usa.illinios.city1",
    "name": "chicago"
}]

var cardData1 = [
    {
    "id": "card:1.usa.illinios.city1.municipality1",
    "name": "DumDum"
},{
    "id": "card:1.usa",
    "name": "usa"
}, {
    "id": "card:2",
    "name": "card2"
}, {
    "id": "card:1",
    "name": "card1"
}, {
    "id": "card:2.washington",
    "name": "washington"
},  {
    "id": "card:1.usa.illinios.city1",
    "name": "chicago"
},
               
               
               ]


var subCardList = [];
var subCardMap = {};
var parentCardList = [];
var cardMap = {};
for (var i = 0; i < cardData.length; i++) {
    if (cardData[i].id.indexOf('.') > -1) {
        subCardList.push(cardData[i]);
        subCardMap[cardData[i].id] = cardData[i];
    } else {
        //top level cards
        var cardId = cardData[i].id;
        var parentCard = {
            id: cardId,
            name: cardData[i].name,
            children: []
        };
        cardMap[cardId] = parentCard;
        parentCardList.push(parentCard);
    }
}
//Sort the subcard list to ensure missing hierarchial cards do not break implementation
subCardList.sort(function (a, b) {
    return a.id.toLowerCase().localeCompare(b.id.toLowerCase());
});

//Build buckets(children array) for child cards on the fly 
for (var j = 0; j < subCardList.length; j++) {
    var topCardId = subCardList[j].id.substr(0, subCardList[j].id.indexOf('.'));
    placeInBucket(topCardId, subCardList[j]); //find matching parent card from map
}

function placeInBucket(topCardId, childCard) {
    var topCard = cardMap[topCardId]; //get top card
    var childIds = childCard.id.split(".");
    childIds.splice(0, 1); //Remove the top card id
        
    var childId = "";
    var bucket = topCard.children; //Assign the initial bucket as the topcard children array
    //loop through all the hierarchy and create complete hierarchy
    for (var i = 0; i < childIds.length; i++) {
        var key = topCardId + childId + "." + childIds[i];
        if (!subCardMap[key]) {
            childId += "." + childIds[i];
            continue;
        } //Do not build hierarchy for missing subcards in the id chain
        var child = cardMap[key];
        if (!child) { 
            bucket.push(childCard);
          	cardMap[key] = childCard; //Register new child to cardMap
            break;
        }
        if (!child.children) child.children = []; //Add Children array to a leaf card if not existing
        bucket = child.children;
        childId += "." + childIds[i]; //Append the id to drill down the hierarchy
    }
}

console.log(JSON.stringify(parentCardList));