Используя Django, отправьте словарь Python на HTML-страницу и преобразуйте его в массивы в Javascript Script

Я пытался отправить словарь 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)

Теперь я хочу преобразовать элементы и ключи словаря в два различных массива 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>

Я пробовал много разных вещей, чтобы получить доступ к моему словарю Python в сценарии Javascript и затем преобразовать его в массивы Javascript, но мне так и не удалось этого сделать. Я также пробовал различные посты на Stackoverflow и т.д., но ничто не смогло меня правильно направить. Я также совсем новичок в Django, поэтому я не очень хорошо знаю синтаксис.

От 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>

html

<input type="hidden" id="dictionary" value="{{ dictionary }}" />

JS

var dictionary = JSON.parse($('#dictionary').val());

Вы можете попробовать это,

views.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}}

template.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>
Вернуться на верх