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. swool安装（centos7）

    1:获取swoole https://github.com/swoole/swoole-src/releases http://pecl.php.net/package/swoole http://g ...

  2. Eclipse:批量将Java源代码文件的编码从GBK转为UTF-8

    很简单的几行代码,就可以批量将GBK格式的java文件转为UTF-8格式. 基本上所有文本文件的编码转换都可以采用这种方式. import java.io.File; import java.io.I ...

  3. JS基础语法---函数也是一种数据类型

    1. 如何获取某个变量的类型? typeof 2. 函数是有数据类型 ,数据类型:是function function f1() { console.log("我是函数"); } ...

  4. 37-Data Volume 之 bind mount

    storage driver 和 data volume 是容器存放数据的两种方式,上一节我们学习了 storage driver,本节开始讨论 Data Volume. Data Volume 本质 ...

  5. LInux：网络连接的设置

    主机名的配置 主机名的配置(配置文件/etc/hostname) 1.使用 hostname 命令临时设置主机名 命令格式:hostname [新主机名] 2．永久设置主机名 命令格式:hostnam ...

  6. LG2145 「JSOI2007」祖码 区间DP

    问题描述 LG2145 题解 把颜色相同的一段看做一个点. 然后类似于合唱队区间DP即可. 但是这题好像出过一些情况,导致我包括题解区所有人需要特判最后一个点. \(\mathrm{Code}\) # ...

  7. [译]发布ABP v0.19包含Angular UI选项

    发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...

  8. CF1263F Economic Difficulties（DP）

    拿小号打了这场,然而做到这里时少看了条件,最后 10min 才发现,没有 AK,身败名裂-- 赛后看就是 sb 题-- (好像这题也不值 2500 吧?) 首先注意到一条很重要的条件:对于每棵树,都存 ...

  9. python--基础知识点梳理（之数据结构）

    数据结构: # 按逻辑结构(面向问题)分为:集合结构.线性结构.树形结构.图形结构 # 按物理结构(面向计算机)分为: # 顺序存储结构(把数据元素放在地址连续的存储单元中,数据间的逻辑关系和物理关系 ...

  10. 【Notepad++】notepad++主题和字体设置（非常好看舒服的）

    #效果图 1.字体:Courier New 字号:14号字体 2.字体:Consolas 字号:14号字体 #设置方法 1.设置---语言格式设置 2.选择主题,同时勾选“使用全局字体”“使用全局字体 ...