django python谷歌距离矩阵api json问题

所以，我对python和Django还不熟悉。我为一个使用谷歌距离矩阵api的非常基本的表单创建了一个视图和html页面。我能够将json的输出显示回我的html页面，没有任何问题。问题是，如何在html页面上显示以英里为单位的距离。现在我只是得到原始的json。但我似乎无法计算出以英里为单位的距离

HTML页面的当前输出：

    origin ['660 Celebration Ave, Celebration, FL 34747, USA']

    destination ['878 Columbus Ave, New York, NY 10023, USA']

    distance in miles: [{'elements': [{'distance': {'text': '1,093 mi', 'value': 1759428}, 
   'duration': {'text': '16 hours 13 mins', 'value': 58364}, 'status': 'OK'}]}]

''' views.py

'''

Html页面 '''

{%block content%}
地图API
{%csrf_令牌%}
取货地点：

交货地点：

发布到谷歌地图
{%if距离%}
原点{{distance.origin\u addresses}

目的地{{distance.destination_addresses}

以英里为单位的距离：{{distance.rows}

{%endif%}
{%endblock%}

---

“”“

我不确定如何在Html中为JSON编制索引，但您可以这样做。 首先，我在段落中添加了一个id，其中包含以英里为单位的距离。 然后我导入jquery并将其嵌套到脚本标记中。 在jquery中，选择id段落并将其中的内容更改为json对象索引

下面是一个大致的概述，它应该是什么样子，但它可能会工作？ Superrrrr是一种索引json对象的黑客方法，希望有一种更干净的方法

{% block content %}
<h2>map API</h2>
<form method="GET"> {% csrf_token %}
<label>Pickup Location:</label><input type="text" name="From"><br>
<label>Delivery Location:</label><input type="text" name="To"><br>
<button type="submit">post to google map</button>
</form>
{% if distance %}
<p><strong>origin {{ distance.origin_addresses }}</strong></p>
<p><strong>destination {{ distance.destination_addresses }}</strong></p>
   <p id="miles-paragraph"><strong>distance in miles: {{ distance.rows }}</strong></p>
{% endif %}
{% endblock %}

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256- WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
var value = JSON.parse("{{distance|escapejs}}");
$(document).ready(function(){
$('#miles-paragraph').html(value[0]["elements"]["distance"]["text"]);
</script>

{%block content%}
地图API
{%csrf_令牌%}
取货地点：

交货地点：

发布到谷歌地图
{%if距离%}
原点{{distance.origin\u addresses}

目的地{{distance.destination_addresses}

以英里为单位的距离：{{distance.rows}
{%endif%}
{%endblock%}
var value=JSON.parse（“{distance | escapejs}}”）；
$（文档）.ready（函数（）{
$（“#英里段落”）.html（值[0][“元素”][“距离”][“文本”]）；

我不确定如何在Html中索引JSON，但您可以这样做。 首先，我在段落中添加了一个id，其中包含以英里为单位的距离。 然后我导入jquery并将其嵌套到脚本标记中。 在jquery中，选择id段落并将其中的内容更改为json对象索引

下面是一个大致的概述，它应该是什么样子，但它可能会工作？ Superrrrr是一种索引json对象的黑客方法，希望有一种更干净的方法

{% block content %}
<h2>map API</h2>
<form method="GET"> {% csrf_token %}
<label>Pickup Location:</label><input type="text" name="From"><br>
<label>Delivery Location:</label><input type="text" name="To"><br>
<button type="submit">post to google map</button>
</form>
{% if distance %}
<p><strong>origin {{ distance.origin_addresses }}</strong></p>
<p><strong>destination {{ distance.destination_addresses }}</strong></p>
   <p id="miles-paragraph"><strong>distance in miles: {{ distance.rows }}</strong></p>
{% endif %}
{% endblock %}

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256- WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
var value = JSON.parse("{{distance|escapejs}}");
$(document).ready(function(){
$('#miles-paragraph').html(value[0]["elements"]["distance"]["text"]);
</script>

{%block content%}
地图API
{%csrf_令牌%}
取货地点：

交货地点：

发布到谷歌地图
{%if距离%}
原点{{distance.origin\u addresses}

目的地{{distance.destination_addresses}

以英里为单位的距离：{{distance.rows}
{%endif%}
{%endblock%}
var value=JSON.parse（“{distance | escapejs}}”）；
$（文档）.ready（函数（）{
$（“#英里段落”）.html（值[0][“元素”][“距离”][“文本”]）；

我明白你的想法，但我需要在python服务器端找到一种方法来实现这一点。稍后，我需要使用这个mile值并使用它执行更多的数学函数。感谢你的努力！哦，我明白了，也许可以采用同样的方法来索引响应[0]['elements']['distance']['text']。希望这能进一步帮助您，祝您好运！我知道您将如何使用它，但我需要在python服务器端找到一种方法来实现这一点。稍后，我需要使用这个mile值并使用它执行更多数学函数。感谢您的努力！哦，我明白了，也许可以采用同样的方法来索引响应[0]['elements'['distance']['text'].希望这能进一步帮助你，祝你好运！

{% block content %}
<h2>map API</h2>
<form method="GET"> {% csrf_token %}
<label>Pickup Location:</label><input type="text" name="From"><br>
<label>Delivery Location:</label><input type="text" name="To"><br>
<button type="submit">post to google map</button>
</form>
{% if distance %}
<p><strong>origin {{ distance.origin_addresses }}</strong></p>
<p><strong>destination {{ distance.destination_addresses }}</strong></p>
   <p id="miles-paragraph"><strong>distance in miles: {{ distance.rows }}</strong></p>
{% endif %}
{% endblock %}

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256- WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
var value = JSON.parse("{{distance|escapejs}}");
$(document).ready(function(){
$('#miles-paragraph').html(value[0]["elements"]["distance"]["text"]);
</script>