使用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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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如何编写易读的代码
2007/07/10 PHP
php smarty函数扩展
2010/03/15 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
javascript每日必学之多态
2016/02/23 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python yield的用法实例分析
2020/03/06 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
师德先进个人事迹材料
2014/12/19 职场文书
小学生优秀评语
2014/12/29 职场文书
鸟的天堂导游词
2015/01/31 职场文书
心灵点滴观后感
2015/06/02 职场文书
2015年除四害工作总结
2015/07/23 职场文书
学校少先队工作总结
2015/08/12 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers