mardi 20 octobre 2015

Array with children - display it in the form of parent-child hierarchy with checkbox

I have the data as shown in step#1 and I would like to rearrange it in the form of parent with corresponding children as in step#2 based on the "id":

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" }] }
]

After I have the data in step#2, I would like to shown it on the UI in the form expand/collapse on click of a checkbox on the parent name

<checkbox> card1
                <checkbox>usa
                            <checkbox>illinois
                                        <checkbox>chicago
<checkbox> card2
                <checkbox>washington

I tried to do the following from my side, but this gets only first level children:

$scope.subCardList = [];
$scope.parentCard = [];
for(var i=0; i<$scope.cardData.length; i++){
    if( $scope.cardData[i].id.indexOf('.') > -1){
        $scope.subCardList.push( $scope.cardData[i] );
    }
}
for(var i=0; i<$scope.cardData.length; i++){
    for(var j=0; j<$scope.subCardList.length; j++){
        var cardObj = {};
        if( $scope.cardData[i].id == $scope.subCardList[j].id.substr(0, $scope.subCardList[j].id.indexOf('.')) ){ //found matching parent card
            cardObj.id = $scope.cardData[i].id;
            cardObj.children = $scope.subCardList[j];
            $scope.parentCard.push( cardObj );
        }
    }
}

Also, I am not sure how I can attach a checkbox to each of the elements. Please let me know how I can achieve this through javascript/jquery?




Aucun commentaire:

Enregistrer un commentaire