使用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 相关文章推荐
js下拉菜单语言选项简单实现
Sep 23 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
js中的闭包学习心得
Feb 06 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
基于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
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php生成略缩图代码
2012/07/16 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Django实现学生管理系统
2019/02/26 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
四年大学生活的个人自我评价
2013/12/11 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
进口业务员岗位职责
2014/04/06 职场文书
商业融资计划书
2014/04/29 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
年终工作总结范文2014
2014/11/27 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
2015个人半年总结范文
2015/03/09 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android