使用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 相关文章推荐
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js快速排序的实现代码
Dec 08 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
React.js入门学习第一篇
Mar 30 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
修改Vue打包后的默认文件名操作
Aug 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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
setTimeout和setInterval的深入理解
2013/11/08 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python实现的文本编辑器功能示例
2017/06/30 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python读取指定日期邮件的实例
2019/02/01 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
包装类的功能、种类、常用方法
2012/01/27 面试题
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
好的自荐信包括什么内容
2013/11/07 职场文书
小学生操行评语大全
2014/04/22 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
狮子林导游词
2015/02/03 职场文书
辩护词格式
2015/05/22 职场文书
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python