Skip to main content
 首页 » 编程设计

jquery之使用 Jsrender 遍历嵌套的 json 模型

2024年08月30日24webabcd

我从服务器发送了以下 json,我一直在尝试使用 jsrender 对其进行迭代,但没有成功

{ 
"1": { 
    "username": "one", 
    "sent_email": false, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": "email", 
    "date_registered": null, 
    "key": "key", 
    "password": "password", 
    "id": 1 
}, 
"2": { 
    "username": "Madawar", 
    "sent_email": true, 
    "group": "admin", 
    "date_activated": "2012-07-17T00:00:00", 
    "activated_email": true, 
    "email": "dennis.wanyoike@gmail.com", 
    "date_registered": "2012-08-22T11:21:39", 
    "key": "e4hVRItub_A=", 
    "password": "$2a$12$F3aBLpF.MyyiVDAocPzE9uJn0K5DZ1V4qRim54wl8f3tEv.7VC4ji", 
    "id": 2 
}, 
"3": { 
    "username": "one", 
    "sent_email": false, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": "email", 
    "date_registered": null, 
    "key": "key", 
    "password": "password", 
    "id": 3 
}, 
"4": { 
    "username": "one", 
    "sent_email": false, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": "email", 
    "date_registered": null, 
    "key": "key", 
    "password": "password", 
    "id": 4 
}, 
"5": { 
    "username": "one", 
    "sent_email": false, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": "email", 
    "date_registered": null, 
    "key": "key", 
    "password": "password", 
    "id": 5 
}, 
"6": { 
    "username": "one", 
    "sent_email": false, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": "email", 
    "date_registered": null, 
    "key": "key", 
    "password": "password", 
    "id": 6 
}, 
"7": { 
    "username": "one", 
    "sent_email": false, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": "email", 
    "date_registered": null, 
    "key": "key", 
    "password": "password", 
    "id": 7 
}, 
"10": { 
    "username": "Madawar12", 
    "sent_email": true, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": "dennis.wanyoike@gmail12.com", 
    "date_registered": "2012-08-30T17:13:07", 
    "key": "JehBfVpoheE=", 
    "password": "$2a$12$V04xpEqCWSLIWl0rte2U7OQC5/TqFcDehKJiuiqRALiW3uEYTBFsK", 
    "id": 10 
}, 
"11": { 
    "username": null, 
    "sent_email": true, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": null, 
    "date_registered": "2012-08-30T17:16:32", 
    "key": "MG7kgSUzNK0=", 
    "password": "$2a$12$6gJa1L0MZn9HB/fZNk1cXe1RDjAIOaAv1ASTgBJu.OrhOMpNfCkOG", 
    "id": 11 
}, 
"12": { 
    "username": null, 
    "sent_email": true, 
    "group": "blogger", 
    "date_activated": null, 
    "activated_email": false, 
    "email": null, 
    "date_registered": "2012-08-30T17:17:30", 
    "key": "qJisSUS8osQ=", 
    "password": "$2a$12$tfDdBODJFTz/afhAvm7EjOpH.Zp.Q8Jw.h312uFZCwJQTlKRI0k6G", 
    "id": 12 
} 

数字1-12代表记录编号,不一定是连续的,是否可以用jsrender显示这条记录,还是我必须从服务器更改结果?

请您参考如下方法:

为了给你一些想法,看看这个 sample它显示了 JsRender 中迭代字段的几种方法。您可以将这些方法应用到您的场景中。 (现场演示是 here )。

更新:当前文档位于:http://www.jsviews.com/#propstag .

至于迭代到任何深度,您确实可以在递归使用的模板或标签中使用 {{props}} - 因此遍历数组和对象的层次结构到任何深度。

有一个{{jsonview/}}标签coded here它就是这样做的,并用于 this jsfiddle sample ,例如……

在这种情况下,它使用数据链接,因此当您以任何方式更改“树”中的数据时,jsonview 输出会逐步更新。相同的 {{jsonview}} 可以仅与 JsRender 一起使用。 (在这种情况下,如果需要,您可以将数据链接的 {^{...}} 标签更改为 {{...}}。)