从MySQL/JSON数据创建JSON分层树 [英] Create a JSON hierarchical tree from MySQL/JSON data
问题描述
我有一个非常大的JSON对象,我需要进入一棵树,但是我不确定该怎么做.我正在将VueJs与内置了Treeview的Vuetify一起使用,但我不知道如何为树准备好数据.
这是我的数据... https://tpcrm.totalprocessing.com/api/获取频道
我需要的是(显然没有包括所有数据)
items: [
{
name: "Adboom",
id: "8ac9a4cb64b143910164b1b2ab0305db"
children: [
{
name: "Jaydox LTD",
id: "8ac9a4cb64b143910164b1b3009b05e2"
children: [
{
name: "beautifullyyoungskin.net"
id: "8ac9a4cb64b143910164b1b8004b063a"
},
{
name: "thinbodydiet.com"
id: "8ac9a4cb64b143910164b1b74af10630"
},
{
name: "youthfulskincare.net"
id: "8ac9a4cb64b143910164b1b77ba70634"
}
]
}
]
},
{
name: "Adult",
id: "8ac9a4c96489324601649354068034ab"
children: [
{
name: "Occonti Ltd",
id: "8ac9a4c965a8666d0165af279ca228dd"
children: [
{
name: "datinginthe.eu (3d Secure)"
id: "8ac9a4cd65a866700165b47a25c74e61"
},
{
name: "datinginthe.eu (Non-3d)"
id: "8ac9a4cd65a866700165b478f0574e48"
},
{
name: "datinginthe.eu - ST (Non-3d)"
id: "8ac9a4ca65a8a0670165d34366d53fc9"
},
{
name: "datinginthe.eu ST (3d Secure)"
id: "8ac9a4cb66aafd790166ad040a170b68"
}
]
}
]
}
]
通过对name
和id
使用相同的模式,可以使用一组关键部分并查找ID和按其分组. /p>
var data = [{ divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "beautifullyyoungskin.net", entityId: '500' }, { divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "thinbodydiet.com", entityId: '501' }, { divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "youthfulskincare.net", entityId: '502' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu (3d Secure)", entityId: '503' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu (Non-3d)", entityId: '504' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu - ST (Non-3d)", entityId: '505' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu ST (3d Secure)", entityId: '506' }],
keys = ["division", "merchant", "entity"],
result = data
.reduce((r, o) => {
keys.reduce((t, k) => {
var temp = (t.children = t.children || []).find(p => p.id === o[k + 'Id']);
if (!temp) {
t.children.push(temp = { name: o[k + 'Name'], id: o[k + 'Id'] });
}
return temp;
}, r);
return r;
}, {})
.children;
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I have a very large JSON object that I need to get into a tree but I'm unsure on how to do it. I'm using VueJs with Vuetify which has Treeview built in but I don't know how to actually get my data ready for the tree.
This is my data... https://tpcrm.totalprocessing.com/api/get-channels
And what I need is this (obviously haven't included all the data)
items: [
{
name: "Adboom",
id: "8ac9a4cb64b143910164b1b2ab0305db"
children: [
{
name: "Jaydox LTD",
id: "8ac9a4cb64b143910164b1b3009b05e2"
children: [
{
name: "beautifullyyoungskin.net"
id: "8ac9a4cb64b143910164b1b8004b063a"
},
{
name: "thinbodydiet.com"
id: "8ac9a4cb64b143910164b1b74af10630"
},
{
name: "youthfulskincare.net"
id: "8ac9a4cb64b143910164b1b77ba70634"
}
]
}
]
},
{
name: "Adult",
id: "8ac9a4c96489324601649354068034ab"
children: [
{
name: "Occonti Ltd",
id: "8ac9a4c965a8666d0165af279ca228dd"
children: [
{
name: "datinginthe.eu (3d Secure)"
id: "8ac9a4cd65a866700165b47a25c74e61"
},
{
name: "datinginthe.eu (Non-3d)"
id: "8ac9a4cd65a866700165b478f0574e48"
},
{
name: "datinginthe.eu - ST (Non-3d)"
id: "8ac9a4ca65a8a0670165d34366d53fc9"
},
{
name: "datinginthe.eu ST (3d Secure)"
id: "8ac9a4cb66aafd790166ad040a170b68"
}
]
}
]
}
]
By using the same pattern for name
and id
, you could use an array of key parts and look for the id and group by it.
var data = [{ divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "beautifullyyoungskin.net", entityId: '500' }, { divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "thinbodydiet.com", entityId: '501' }, { divisionName: "Adboom", divisionId: '000', merchantName: "Jaydox LTD", merchantId: '020', entityName: "youthfulskincare.net", entityId: '502' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu (3d Secure)", entityId: '503' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu (Non-3d)", entityId: '504' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu - ST (Non-3d)", entityId: '505' }, { divisionName: "Adult", divisionId: '100', merchantName: "Occonti Ltd", merchantId: '040', entityName: "datinginthe.eu ST (3d Secure)", entityId: '506' }],
keys = ["division", "merchant", "entity"],
result = data
.reduce((r, o) => {
keys.reduce((t, k) => {
var temp = (t.children = t.children || []).find(p => p.id === o[k + 'Id']);
if (!temp) {
t.children.push(temp = { name: o[k + 'Name'], id: o[k + 'Id'] });
}
return temp;
}, r);
return r;
}, {})
.children;
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
这篇关于从MySQL/JSON数据创建JSON分层树的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!