使用Map將資料變成自己想要的
最近有一些大的資料是需要我們前端來寫死的,後臺就只給了我們散亂的資料,至於要變成ui控制元件想要的那種資料格式,得用js改造一番,我使用了es6的Map方法來改造資料
如我要處理的資料如下:
--AgentMetrics
agent.alive
--CpuMetrics
cp213
cp1321
cpadsaf
cpddsa
cpsfaf
cpfad
cssfa
cpads
cpsa
cdas
cpads
--DeviceMetrics
df.byads
df.bytsad
df.bytas
df.bytes.used.percent
df.inoa
df.statistics.total
df.statistics.used
df.statistics.used.percent
df.inodes.used.percent
df.inodes.total
df.inodes.used
df.inodes.free
--DiskIOMetrics
disk.io.avgqu-sz
disk.io.avgrq_sz
disk.io.await
disk.io.ios_in_progress
disk.io.msec_read
disk.io.msec_total
disk.io.msec_weighted_total
disk.io.msec_write
disk.io.read_bytes
disk.io.read_merged
disk.io.read_requests
disk.io.read_sectors
disk.io.svctm
disk.io.util
disk.io.write_bytes
disk.io.write_merged
disk.io.write_requests
disk.io.write_sectors
--KernelMetrics
kernel.files.allocated
kernel.files.left
kernel.maxfiles
kernel.maxproc
--LoadAvgMetrics
load.15min
load.1min
load.5min
--MemMetrics
mem.memfree.percent
mem.swapfree.percent
mem.swapused.percent
mem.memused.percent
mem.memtotal
mem.memused
mem.memfree
mem.swaptotal
mem.swapused
mem.swapfree
--NetMetrics
net.if.in.bits
net.if.in.bytes
net.if.in.compressed
net.if.in.dropped
net.if.in.errors
net.if.in.fifo.errs
net.if.in.frame.errs
net.if.in.multicast
net.if.in.packets
net.if.in.percent
net.if.out.bits
net.if.out.bytes
net.if.out.carrier.errs
net.if.out.collisions
net.if.out.compressed
net.if.out.dropped
net.if.out.errors
net.if.out.fifo.errs
net.if.out.packets
net.if.out.percent
net.if.speed.bits
net.if.total.bits
net.if.total.bytes
net.if.total.dropped
net.if.total.errors
net.if.total.packets
--UdpMetrics
sn4124
s21421
snm2312
sn234
snm213423
snm432
sn24124
--SocketStatSummaryMetrics
ss.wer
rew
se2ew
swrw
swre
ss.timewait
--NetstatMetrics
TcpErew
Tcewre
TcpExt.ListenDrops
TcpEfweeeeee
Tcewes
TcpEefwe
TcpExwqew
Tcpww
TcpEwrw
TcpEyytuu
TcpExddvff
TcpE222224
TcpEwrq
TcpExt.TCPLostRetransmit
TcpExt.TCPMemoryPressures
TcpExt.TCPMinTTLDrop
TcpExt.TCPPrequeueDropped
TcpExt.TCPSchedulerFailed
TcpExt.TCPSpuriousRTOs
TcpExt.TCPTimeouts
TcpExt.TCPTSReorder
TcpExt.TW
我需要改造成一種樹的解構,像下面這樣
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
children: [
{
title: 'leaf',
key: '0-0-0-0',
},
{
title: 'leaf',
key: '0-0-0-1',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [
{
title: (
<span
style={{
color: '#1890ff',
}}
>
sss
</span>
),
key: '0-0-1-0',
},
],
},
],
}
我的改造程式碼如下:
var arr = `--AgentMetrics
agent.alive
--CpuMetrics
cp213
cp1321
cpadsaf
cpddsa
cpsfaf
cpfad
cssfa
cpads
cpsa
cdas
cpads
--DeviceMetrics
df.byads
df.bytsad
df.bytas
df.bytes.used.percent
df.inoa
df.statistics.total
df.statistics.used
df.statistics.used.percent
df.inodes.used.percent
df.inodes.total
df.inodes.used
df.inodes.free
--DiskIOMetrics
disk.io.avgqu-sz
disk.io.avgrq_sz
disk.io.await
disk.io.ios_in_progress
disk.io.msec_read
disk.io.msec_total
disk.io.msec_weighted_total
disk.io.msec_write
disk.io.read_bytes
disk.io.read_merged
disk.io.read_requests
disk.io.read_sectors
disk.io.svctm
disk.io.util
disk.io.write_bytes
disk.io.write_merged
disk.io.write_requests
disk.io.write_sectors
--KernelMetrics
kernel.files.allocated
kernel.files.left
kernel.maxfiles
kernel.maxproc
--LoadAvgMetrics
load.15min
load.1min
load.5min
--MemMetrics
mem.memfree.percent
mem.swapfree.percent
mem.swapused.percent
mem.memused.percent
mem.memtotal
mem.memused
mem.memfree
mem.swaptotal
mem.swapused
mem.swapfree
--NetMetrics
net.if.in.bits
net.if.in.bytes
net.if.in.compressed
net.if.in.dropped
net.if.in.errors
net.if.in.fifo.errs
net.if.in.frame.errs
net.if.in.multicast
net.if.in.packets
net.if.in.percent
net.if.out.bits
net.if.out.bytes
net.if.out.carrier.errs
net.if.out.collisions
net.if.out.compressed
net.if.out.dropped
net.if.out.errors
net.if.out.fifo.errs
net.if.out.packets
net.if.out.percent
net.if.speed.bits
net.if.total.bits
net.if.total.bytes
net.if.total.dropped
net.if.total.errors
net.if.total.packets
--UdpMetrics
sn4124
s21421
snm2312
sn234
snm213423
snm432
sn24124
--SocketStatSummaryMetrics
ss.wer
rew
se2ew
swrw
swre
ss.timewait
--NetstatMetrics
TcpErew
Tcewre
TcpExt.ListenDrops
TcpEfweeeeee
Tcewes
TcpEefwe
TcpExwqew
Tcpww
TcpEwrw
TcpEyytuu
TcpExddvff
TcpE222224
TcpEwrq
TcpExt.TCPLostRetransmit
TcpExt.TCPMemoryPressures
TcpExt.TCPMinTTLDrop
TcpExt.TCPPrequeueDropped
TcpExt.TCPSchedulerFailed
TcpExt.TCPSpuriousRTOs
TcpExt.TCPTimeouts
TcpExt.TCPTSReorder
TcpExt.TW`
var map = new Map();
let tmpKey;
arr.split("\n").forEach((str) => {
if (str.length > 0) {
if (str.indexOf("--") != -1) {
tmpKey = str.substring(2);
map.set(tmpKey, new Array());
} else {
let arr = map.get(tmpKey);
//console.log(map.get(tmpKey));
arr.push(str);
}
}
});
console.log(map);
var treeDataTemp = [];
const trr = [...map];
console.log(trr)
function getTreeData() {
for (let i = 0; i < trr.length; i++) {
let node = {
title: trr[i][0],
key: 'p-' + trr[i][0],
children: []
};
if (trr[i][1].length > 0) {
trr[i][1].forEach((item, index) => {
node.children.push({
title: item,
key: item,
});
});
}
treeDataTemp.push(node);
}
}
getTreeData();
console.log(treeDataTemp);
相關文章
- 如何從800萬資料中快速撈出自己想要的資料?
- phpcms如何使用自己想要的頁面呢?PHP
- java將map轉成bean工具JavaBean
- Java將頁面中的資料存到MySQL資料庫中,漢字變成問號JavaMySql資料庫
- 在 GitHub 學習,成長為自己想要的樣子|HelloGitHub 訪談Github
- phpcms如何使用自己設計或者想要的頁面呢?PHP
- NodeJS:將資料夾按照存放路徑變成一個對應的JSONNodeJSJSON
- jdk8將集合中的資料聚合成想要的欄位JDK
- Oracle使用RMAN將普通資料檔案轉成ASMOracleASM
- 如何將Windows的桌面替換成自己的程式Windows
- 使用labelme標記自己的資料jsonJSON
- 如何獲取想要的資料?
- 如何將資料庫中的資料導成 excel 檔案資料庫Excel
- 利用Jquery的map函式將json資料行轉化為表格jQuery函式JSON
- 資料中臺的終局是將資料變現
- Excel如何篩選出自己想要的資料 excel怎麼篩選出需要的內容Excel
- 想要企業資料變現?何不試試企業雲盤
- 東北公司使用新套件將幾周變成幾天套件
- Kubernetes 將改變資料庫的管理方式資料庫
- 資料庫市場格局已變,統一的管理平臺將成為資料庫生態體系的主要入口資料庫
- 將你的 CentOS 變成 OSPF 路由器CentOS路由器
- 使用 Lakka Linux 將你的舊 PC 變成復古遊戲主機Linux遊戲
- excel篩選條件怎麼設定 excel怎麼篩選出自己想要的資料Excel
- Map 資料結構資料結構
- jquery遍歷得到的 Map 資料,jQuery
- 如何使用商品詳情API介面來獲取想要的商品資料?API
- 如何做個自己想要的Window Server了?Server
- Python將經緯度資料轉換成浮點資料Python
- pentaho7.0將資料庫移植成mysql資料庫MySql
- 使用SQL語句將資料庫中的兩個表合併成一張表SQL資料庫
- 雲學堂丁雲鵬:變成別人,還不如成為自己!
- 想要將視訊轉換成GIF檔案?就是這麼簡單
- Flutter資料解析Map格式Flutter
- jmeter使用問題——將介面返回變數儲存成csv檔案JMeter變數
- 如何使用精益創業將創意變成成功產品 - Bouza創業
- 人工智慧將如何改變資料安全人工智慧
- 類成員函式作為map容器的value使用例項函式
- js將有父子關係的資料轉換成樹形結構資料JS