使用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 相关文章推荐
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
Javascript Dom元素获取和添加详解
Sep 24 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
javascript实现画板功能
Apr 12 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
php生成无限栏目树
2017/03/16 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
js word表格动态添加代码
2010/06/07 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python操作mongodb的9个步骤
2018/06/04 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
财务会计个人原因辞职信
2019/06/21 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS