使用JavaScript獲取Django模板指定鍵值數(shù)據(jù)

更新時(shí)間：2020年05月27日 10:36:51 作者：破竹

這篇文章主要介紹了使用JavaScript獲取Django模板指定鍵值數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

Django中利用js來(lái)操作數(shù)據(jù)的常規(guī)操作一般為點(diǎn)(.)操作符來(lái)獲取字典或列表的數(shù)據(jù)，一般如{{data.0}}，{{data.arg}}

但有時(shí)如果數(shù)據(jù)是嵌套類型的數(shù)據(jù)時(shí)，直接獲取某個(gè)值就變得困難了，比如下面的格式要獲取

correct中qxl的值

startArgsSet={"correct":{"qxl":0,"kkx":0},"reliable":{"qxl":0,"kkx":0},"security":{"qxl":0,"kkx":0},"understand":{"qxl":0,"kkx":0},"entropy":{"qxl":0,"kkx":0},
"mature":{"qxl":0,"kkx":0},"active":{"qxl":0,"kkx":0},"service":{"qxl":0,"kkx":0},"file":{"qxl":0,"kkx":0},
"tech":{"qxl":0,"kkx":0},"property":{"qxl":0,"kkx":0},"organize":{"qxl":0,"kkx":0},"develop":{"qxl":0,"kkx":0},
"source":{"qxl":0,"kkx":0},"update":{"qxl":0,"kkx":0},"fix":{"qxl":0,"kkx":0},
"quality":{"qxl":0,"kkx":0},"meanNum":{"qxl":0,"kkx":0},"variance":{"qxl":0,"kkx":0}
}

這時(shí)候如果改變數(shù)據(jù)格式為列表中的無(wú)嵌套字典格式比較麻煩，可以自定義過(guò)濾器來(lái)獲取數(shù)據(jù)，

from django.template.defaulttags import register

@register.filter
def getArgQxlValue(dictionary,arg):
  return dictionary[arg]['qxl']
  
@register.filter
def getArgKkxValue(dictionary,arg):
  return dictionary[arg]['kkx']
  
@register.filter
def getArgName(dictionary,arg):
  return dictionary[arg]['name']

在模板中就可以以這樣寫

<!-- the second important page of the project-->
{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>超標(biāo)信息</title>

   <script src="{% static 'js/a-mynewjs.js' %}"></script>

</head>

<body>

 {{ guestSetArgs|safe }}<br><br><br>
 
 {{ warningdata|safe }}<br><br>
 
 <script>
 {% for i in guestSetArgs %}
  {% for j in warningdata %} 
    if("{{i}}"=="{{j}}")
    {
      if(Number({{warningdata|getArgQxlValue:j}})>Number({{guestSetArgs|getArgQxlValue:i}}))
      var setArgStr="{{warningdata|getArgName:i}} 超出閥值  閥值：{{guestSetArgs|getArgQxlValue:j}}  檢測(cè)值：{{warningdata|getArgQxlValue:j}}<br>"
      document.write(setArgStr);
    }
    
  {% endfor %} 
 {% endfor %} 
 
  </script>
</body>
</html>

形如{{warningdata|getArgQxlValue:j}}，就可以獲取到里面的值了

稍做美化

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何動(dòng)態(tài)加載外部Javascript文件
這篇文章主要介紹了如何動(dòng)態(tài)加載外部Javascript文件，本文舉例講解使用js加載器動(dòng)態(tài)加載外部Javascript文件，感興趣的小伙伴們可以參考一下
2015-12-12
Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用
這篇文章主要為大家介紹了Websocket通信協(xié)議在數(shù)字孿生中的應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)
這篇文章主要介紹了Javascript如何遍歷Html Table(包括內(nèi)容和屬性值),需要的朋友可以參考下
2014-07-07
微信小程序?qū)崿F(xiàn)下拉篩選功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法,涉及jQuery事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
微信小程序獲取音頻時(shí)長(zhǎng)與實(shí)時(shí)獲取播放進(jìn)度問(wèn)題
這篇文章主要介紹了微信小程序獲取音頻時(shí)長(zhǎng)與實(shí)時(shí)獲取播放進(jìn)度,文中給大家通過(guò)一個(gè)例子介紹了微信小程序音頻長(zhǎng)度獲取的問(wèn)題，感興趣的朋友跟隨腳本之家小編一起看看吧
2018-08-08
js數(shù)組去重的hash方法
對(duì)于JavaScript數(shù)組去除重復(fù)項(xiàng)，現(xiàn)在有多種方法，其中一種是hash，本文主要對(duì)hash方法去除js數(shù)組重復(fù)項(xiàng)進(jìn)行介紹，下面就跟小編一起來(lái)看下吧
2016-12-12
JS+Canvas實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了原生JS+Canvas實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
通過(guò)JavaScript實(shí)現(xiàn)CSS和JS文件的動(dòng)態(tài)加載
在現(xiàn)代Web開(kāi)發(fā)中,動(dòng)態(tài)加載CSS和JavaScript文件是一個(gè)常見(jiàn)的需求,這種技術(shù)可以用來(lái)優(yōu)化頁(yè)面加載速度,減少初始加載時(shí)間,并提高用戶體驗(yàn),本文將詳細(xì)介紹如何通過(guò)JavaScript實(shí)現(xiàn)CSS和JS文件的動(dòng)態(tài)加載,包括不同的加載方法、注意事項(xiàng)以及最佳實(shí)踐
2024-11-11
讓IE支持RGBa的背景色的代碼
老版本的IE不支持RGBa的背景色，不過(guò)我們可以用濾鏡實(shí)現(xiàn)同樣的效果。
2010-07-07