使用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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 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源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python函数返回值实例分析
2015/06/08 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
年度考核自我评价
2014/01/25 职场文书
少先队入队活动方案
2014/02/08 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
2019公司管理制度
2019/04/19 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技