使用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中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
js获取class的所有元素
Mar 28 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue如何实现动态加载脚本
Feb 05 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
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python日志syslog使用原理详解
2020/02/18 Python
信号生成及DFT的python实现方式
2020/02/25 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
促销活动总结报告
2014/04/26 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
详解Python requests模块
2021/06/21 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题