根據json資料和HTML模板,渲染巢狀的HTML

2020-12-22 11:53:23 星期二

場景, html模板是多個div巢狀, 裡邊有列表, 也有鍵值對, 與之匹配的有乙個json資料, 需要根據json去渲染這個html dom

示例截圖:

1. html模板

123

456 : : 78
9101112
: : 
1314

1

,7 ,
8 ,9],
10 'dd': [
11 'd1' : 'd1',
12 'd2' : 'd2',
13 'd3': [
14 ,
15 ,
16 ,
17],
18 'mm' : '3'19]
20 };

1/**

2* @param node html dom節點, 注意不是string
3* @param arr json陣列 注意是陣列型別
4* @return string 返回html字串, 注意不是dom節點5*/
6function
repeatnode(node, arr) 26}
2728
//再渲染內層的物件
29for (let j in
map) 39}
4041
//最後渲染外層的鍵值對/字串
42for (let j in
map) ', 'g');
45 tmp =tmp.replace(re, map[j]);
4647}48
}4950out.push(tmp);51}
5253
return out.join('');
54 }

1

2316
1718
1920
2122
2324
2526
: : 
2728
2930
3132
: : 
3334
3536
37110
111112

推薦幾個自己開發的小工具:

summerphp 一款簡潔的php框架, 支援多種方式渲染html, 自帶註冊登入功能, 自帶redis隊裡功能, 自帶前端單頁面應用(spa)

zbjstool 好用的js庫集合, 單頁面路由框架, 前端生成分享圖等等

microstore 單頁面應用, 小巧, 功能豐富, 適用移動端的個人商店系統

根據資料和模板生成頁面

根據規則去解析鏈結，並且獲取id或者索引值 請求路徑，let pathobj path.parse req.url let index pathobj base 根據索引獲取資料 let movies let index rpathobj base movies index 3.根據模板渲染頁面 r...

根據JSON資料的key擷取JSON字串

可處理 形式的json資料 把json轉化為字串 var bbb json stringify array 用indexof查詢key在json字串中所在的位置 var a bbb.indexof 15d91690 0804 4e1d b7e6 00029f5a9992 indexof查詢 的位置 ...

JS模板和JSON資料的結合

web2.0的開發裡,ajax是乙個非常重要的技術.如果你的 裡沒有點ajax做的東西,你都不好意思說你是web2.0的 使用ajax的時候,最關心的就是資料傳輸的格式了,一般來說,有以下幾種格式 純文字html xmljson 可以說主流的就是上面幾種了.下面我們來分別分析一下 純文字使用純文字的...