使用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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
Yii分页用法实例详解
2014/12/04 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
python list语法学习(带例子)
2013/11/01 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
django+echart数据动态显示的例子
2019/08/12 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
个人简历自我评价
2014/01/06 职场文书
学习十八大报告感言
2014/02/04 职场文书
2014年安全员工作总结
2014/11/13 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
教师个人教学反思
2016/02/23 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
canvas 中如何实现物体的框选
2022/08/05 Javascript