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