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}}&nbsp;超出阀值&nbsp;&nbsp;阀值：{{guestSetArgs|getArgQxlValue:j}}&nbsp;&nbsp;检测值：{{warningdata|getArgQxlValue:j}}<br>"

           document.write(setArgStr);

       }

    {% endfor %}

  {% endfor %} 

    </script>

</body>

</html>

形如{{warningdata|getArgQxlValue:j}}，就可以获取到里面的值了

稍做美化

参考自https://docs.djangoproject.com/en/2.2/howto/custom-template-tags/

JavaScript获取Django模板中指定键值的数据，使用过滤器的更多相关文章

  1. JavaScript 获取数组对象中某一值封装为数组

    1.获取数组对象中某一值封装为数组(一) data = [["2000-06-05",116],["2000-06-06",129]]; var dateLis ...

  2. WebAPi获取请求头中对应键值

    /// <summary> /// 依据键获取请求头中值数据 /// </summary> /// <param name="request"> ...

  3. php对数组中指定键值排序

    function array_sort($arr,$keys,$type='asc'){ $keysvalue = $new_array = array(); foreach ($arr as $k= ...

  4. Django 模板中使用css, javascript

    Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...

  5. .NET获取Html字符串中指定标签的指定属性的值

    using System.Text; using System.Text.RegularExpressions; //以上为要用到的命名空间 /// <summary> /// 获取Htm ...

  6. 获取请求 header 中指定字段的值

    private function getHeader($name) {//获取请求头中$name的值 $name = 'HTTP_' . $name; foreach ($_SERVER as $ke ...

  7. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  8. Spark中的键值对操作-scala

    1.PairRDD介绍     Spark为包含键值对类型的RDD提供了一些专有的操作.这些RDD被称为PairRDD.PairRDD提供了并行操作各个键或跨节点重新进行数据分组的操作接口.例如,Pa ...

  9. Spark中的键值对操作

    1.PairRDD介绍     Spark为包含键值对类型的RDD提供了一些专有的操作.这些RDD被称为PairRDD.PairRDD提供了并行操作各个键或跨节点重新进行数据分组的操作接口.例如,Pa ...

随机推荐

  1. 原生js对cookie的增删改查

    一.增 document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path ...

  2. Java生鲜电商平台-订单模块状态机架构设计

    Java生鲜电商平台-订单模块状态机架构设计 说明:在Java生鲜电商平台中订单的状态流转业务        我们知道 一个订单会有很多种状态:临时单.已下单.待支付.待收货.待评价.已完成,退货中等 ...

  3. C#中实现文件重命名的方式

    场景 在C#中如果是删除文件的话可以直接使用 if (System.IO.File.Exists(fileName)) { System.IO.File.Delete(fileName); } 但是如 ...

  4. mapreduce shortest way out

    相关知识 最优路径算法是无向图中满足通路上所有顶点(除起点.终点外)各异,所有边也各异的通路.应用在公路运输中,可以提供起点和终点之间的最短路径,节省运输成本.可以大大提高交通运输效率. 本实验采用D ...

  5. BeanUtils.populate()空字符串转换日期的解决办法

    我们在使用beanutils.populate()封装参数时,如果封装的字符串是空,在转换成date时会出现以上异常,此时可以在工具类中添加静态代码块即可解决:注意导入beanutils 包 impo ...

  6. 如何实现Web页面录屏？

    摘要: 很有意思的操作... 原文:web页面录屏实现 译者:frontdog Fundebug经授权转载,版权归原作者所有. 写在前面的话 在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇 ...

  7. 微信小程序开发者工具构建npm提示没找到node_modules目录

    一.官网给的文档写的不够充分,需要你充分理解npm的使用方法,才能明白的: 二.第一步:先在你电脑上安装npm 参考下面文章 https://www.cnblogs.com/zmdComeOn/p/1 ...

  8. Day9 - Python基础9 socket基础、粘包

    本节内容: 1.socket的介绍 2.基于tcp的socket 3.基于tcp的问题分析 4.基于udp的socket 5.基于udp的问题分析 6.基于udp的ntp服务 7.基于tcp的远程执行 ...

  9. WPF DataGrid 双击行 获得绑定数据

    原文:WPF DataGrid 双击行 获得绑定数据 1)增加事件 2)增加对象获取 1)事件代码 Datagrid 增加事件 MouseDoubleClick="dataGrid_Mous ...

  10. Django3.0 前瞻 支持异步通信

    最近两年,Django的版本号提升得特别快,2.0还没有多久,很快就要到3.0了. 让我们先看看官方的路线图和时间表: 版本号 发布日期 停止更新日期 停止维护日期 3.0 2019-12 2020- ...