使用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 相关文章推荐
JavaScript 学习初步 入门教程
Mar 25 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
vue实现循环切换动画
Oct 17 Javascript
基于javascript的拖拽类封装详解
Apr 19 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
JS原型与继承操作示例
2019/05/09 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
EJB面试题
2015/07/28 面试题
爷爷追悼会答谢词
2014/01/24 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python