使用JavaScript获取Django模板指定键值数据

更新时间：2020年05月27日 10:36:51 作者：破竹

这篇文章主要介绍了使用JavaScript获取Django模板指定键值数据,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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数组去重的几种方法
这篇文章主要给大家介绍了关于JavaScript数组去重的几种方法，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
JavaScript设计模式之享元模式实例详解
这篇文章主要介绍了JavaScript设计模式之享元模式,结合实例形式较为详细的分析了javascript享元模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
2019-01-01
Javascript访问html页面的控件的方法详细分析
这段时间在公司比较的空闲,决定研究研究javascript访问html控件，这是很普遍的，这里我系统的研究javascript的访问方式，测试通过并有下面一些研究成就，供大家分享和补充。
2008-08-08
小程序通过小程序云实现微信支付功能实例
本文主要介绍了小程序通过小程序云实现微信支付功能实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
Javascript 类型转换方法
Javascript (ECMA Script)是一种弱类型的语言。这并不意味着它没有数据类型，只是变量或者Javascript对象属性不需要一个特定类型的值分配给它或者它始终使用相同的值。
2010-10-10
原生Js实现的画廊功能
这篇文章主要介绍了原生Js实现的画廊功能，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下
2021-05-05
JavaScript记录光标在编辑器中位置的实现方法
这篇文章主要介绍了JavaScript记录光标在编辑器中位置的实现方法,涉及JavaScript鼠标事件结合页面元素的操作技巧,需要的朋友可以参考下
2016-04-04
js动态创建、删除表格示例代码
生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号，具体的实现过程如下，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
JavaScript对象与DOM对象进行绑定会遇到一个问题：如果被绑定的对象的方法中包含this关键字，当事件被触发时this指向的却是DOM对象，而不是之前的JS对象。
2011-09-09
史上最全JavaScript数组去重的十种方法（推荐）
这篇文章主要介绍了JavaScript数组去重的十种方法,利用元素的属性和特性进行不同的去重方法，并实例演示如何测试去重超大数组，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08