使用JavaScript获取Django模板指定键值数据


Posted in Javascript onMay 27, 2020

Django中利用js来操作数据的常规操作一般为点(.)操作符来获取字典或列表的数据,一般如{{data.0}},{{data.arg}}

但有时如果数据是嵌套类型的数据时,直接获取某个值就变得困难了,比如下面的格式要获取

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}
}

这时候如果改变数据格式为列表中的无嵌套字典格式比较麻烦,可以自定义过滤器来获取数据,

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>超标信息</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}}  检测值:{{warningdata|getArgQxlValue:j}}<br>"
      document.write(setArgStr);
    }
    
  {% endfor %} 
 {% endfor %} 
 
  </script>
</body>
</html>

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

使用JavaScript获取Django模板指定键值数据

稍做美化

使用JavaScript获取Django模板指定键值数据

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
div模拟选择框示例代码
Nov 03 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
基于Vue CSR的微前端实现方案实践
May 27 #Javascript
Node.js API详解之 vm模块用法实例分析
May 27 #Javascript
jQuery实现鼠标滑动切换图片
May 27 #jQuery
js验证账户名是否重复
May 26 #Javascript
小程序富文本提取图片可放大缩小
May 26 #Javascript
微信小程序自定义联系人弹窗
May 26 #Javascript
微信小程序单选框自定义赋值
May 26 #Javascript
You might like
第一节--面向对象编程
2006/11/16 PHP
初品cakephp 入门基础
2012/02/16 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python版微信红包分配算法
2015/05/04 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
详解python字节码
2018/02/07 Python
python实现汉诺塔算法
2021/03/01 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
Java面向对象面试题
2016/12/26 面试题
校领导推荐信
2013/11/01 职场文书
数控技术专业推荐信
2013/11/01 职场文书
住宅使用说明书
2014/05/09 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
实习指导教师评语
2014/12/30 职场文书
2016高考感言
2015/08/01 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
python 中的@运算符使用
2021/05/26 Python
python中tkinter复选框使用操作
2021/11/11 Python