使用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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
jquery操作select大全
Apr 25 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
详解JavaScript数据类型和判断方法
Sep 04 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
模仿OSO的论坛(四)
2006/10/09 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
如何在Python对Excel进行读取
2020/06/04 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
shell程序中如何注释
2012/02/17 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
政法学院毕业生求职信
2014/02/28 职场文书
安全目标管理责任书
2014/07/25 职场文书
师德师风学习材料
2014/12/19 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Nginx工作原理和优化总结。
2021/04/02 Servers
mysql函数之截取字符串的实现
2022/08/14 MySQL