我一直在嘗試將 Python 字典發送到 HTML 頁面，并在 Javascript 中使用該字典在我的網站上添加圖表，使用 Django
表單取一個Image Upload，代碼如下，
<div class=" mx-5 font-weight-bold">
Uplaod Image
</div>
<input class=" " type="file" name="filePath">
<input type="submit" class="btn btn-success" value="Submit">
然后將該影像發送到views.py處理它的位置，并從該影像生成結果影像以及字典。然后再一次，呈現一個 HTML 頁面，其中字典以及生成的影像在背景關系變數中發送。代碼如下，
def predictImage(request):
fileObj = request.FILES['filePath']
fs = FileSystemStorage()
filePathName = fs.save(fileObj.name, fileObj)
filePathName = fs.url(filePathName)
testimage = '.' filePathName
img_result, resultant_array, total_objects = detect_image(testimage)
cv2.imwrite("media/results/" fileObj.name, img=img_result)
context = {'filePathName':"media/results/" fileObj.name, 'predictedLabel': dict(resultant_array), 'total_objects': total_objects}
#context = {}
return render(request, 'index.html', context)
現在，我想將 Dictionary 專案和鍵轉換為兩個不同的 Javascript 陣列，然后用于在 HTML 頁面上繪制圖形。Javascript的模板代碼如下，
<script>
// const value = JSON.parse(document.getElementById('data_values').textContent);
// alert(value);
var xArray = [];
var yArray = [];
var xArray = ["Italy", "France", "Spain", "USA", "Argentina"]; // xArray needs to have Python Dictionary's keys
var yArray = [55, 49, 44, 24, 15]; // yArray needs to have Python Dictionary's values
var layout = { title: "Distribution of Labels" };
var data = [{ labels: xArray, values: yArray, hole: .5, type: "pie" }];
Plotly.newPlot("myPlot", data, layout);
</script>
我嘗試了很多不同的方法來在 Javascript 腳本中訪問我的 Python 字典，然后將其轉換為 Javascript 陣列，但我仍然沒有設法做到這一點。我還嘗試了不同的 Stackoverflow 帖子等，但沒有什么能真正正確地指導我。我對 Django 也很陌生，所以我也不太了解語法。
uj5u.com熱心網友回復：
從Django-doc json_script
{{ value|json_script:"hello-data" }}
在你的 Javascript 中
<script>
const data = JSON.parse(document.getElementById('hello-data').textContent);
var xArray = Object.keys(data) // return list of keys
var yArray = Object.values(data) // return list of values
</script>
uj5u.com熱心網友回復：
你能試試這個嗎
視圖.py
# context data
context = {'filePathName':"media/results/" fileObj.name, 'predictedLabel': dict(resultant_array), 'total_objects': total_objects,
"data": {"Italy":11, "France":22, "Spain":22, "USA":23, "Argentina":12}}
模板.html
<script>
// const data = JSON.parse();
// alert(value);
var data = JSON.parse("{{data|safe}}".replaceAll("'", '"'));
var xArray = [];
var yArray = [];
var xArray = Object.keys(data); // xArray needs to have Python Dictionary's keys
var yArray = Object.values(data) // yArray needs to have Python Dictionary's values
var layout = { title: "Distribution of Labels" };
var data = [{ labels: xArray, values: yArray, hole: .5, type: "pie" }];
Plotly.newPlot("myPlot", data, layout);
</script>
uj5u.com熱心網友回復：
html
<input type="hidden" id="dictionary" value="{{ dictionary }}" />
JS
var dictionary = JSON.parse($('#dictionary').val());
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/453481.html
標籤：javascript Python django 字典 阴谋
上一篇：在Dart/Flutter中的map物件上呼叫map函式時如何獲取每個條目的索引？
下一篇：將字典結構轉換為另一個