- 将接口返回的数据整理成组件支持的数据结构
接口返回的数据格式:
[{
"id": 767947,
"appName": "生生世世",
"appBundle": "cds",
"appStore": 2,
"link": "www.baidu.com",
"accountId": "3,68",
"cAccountId": 1,
"platform": 1,
"version": "",
"status": 1,
"category": "",
"subCategory": "",
"isListed": 0,
"orientation": 0,
"icon": "",
"settleRate": 100,
"jdaiStatus": 0,
"create_at": 1731402650,
"update_at": 1731562349
},
{
"id": 767946,
"appName": "张三说",
"appBundle": "com.top.com21",
"appStore": 1,
"link": "www.baidu.com",
"accountId": "1,8",
"cAccountId": 1,
"platform": 1,
"version": "",
"status": 1,
"category": "",
"subCategory": "",
"isListed": 0,
"orientation": 0,
"icon": "",
"settleRate": 100,
"jdaiStatus": 0,
"create_at": 1731290607,
"update_at": 1731566164
}
]
以上数据是下面👇点击查看代码中的buildTree方法的入参
步骤一:将接口返回的数据第一步以“accountId”的维度进行拆分再进行合并。
步骤二:以accountId为维度的父级tree的数据结构。
** 前两步的具体实现方法如下**:
点击查看代码
function buildTree(data) {
console.log('buildTree',data)
const result = [];
let treeData = [];
// 第一步:将多账户的数据进行拆分合并
data.forEach((item,index) => {
if (item.accountId.length==1){
item.leafLever=2
result.push(item)
}else{
let accountIdArray = cloneDeep(item.accountId);
const accountIds = accountIdArray.split(',');
accountIds.forEach(accountId => {
let account1=cloneDeep(item);
account1.accountId=accountId
account1.leafLever=2
result.push(account1)
})
}
});
// 第二步:以accountId为维度的父级tree的数据结构
result.map(item => {
let accountId = item.accountId;
let treeItem = {
leafLever:1,
id: item.accountId,
appName: 'name_' + item.accountId,
children: [item]
};
if (!treeData.some(item1 => item1.id === accountId)) {
treeData.push(treeItem);
} else {
let existingItem = treeData.find(item1 => item1.id === accountId);
if (existingItem) {
let items=cloneDeep(item)
existingItem.children.push(items);
}
}
});
return treeData
}
步骤三:用户以accountId为维度的查询