Как преобразовать мою html-строку в собственный тип данных?

Я довольно новичок в JS и HTML, работа над проектом Django сейчас заставляет меня сходить с ума от этого .

Я передал переменную из контекста из Django в html. Я заметил, что тип данных преобразуется в строку с помощью defualt.

views.py:

    context = {'segment': 'index',
               "service_data": data               
}
    html_template = loader.get_template('index.html')
    return HttpResponse(html_template.render(context, request))

HTML страницы

                                    <div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
                                    <script type="text/javascript">
                                        const service_data = "{{ service_data }}"
                                    </script>

В Javasript я вижу, что тип данных service_data - string. Я хотел бы обойти его как массив, но он преобразуется в строку.

const data = Array.from(service_data);  //this is converted to objet not arrary..

function prepareChartData(data) {
    var chartData = [];
    for (var i = 0; i < 10; i++) {
        let timestampe = data[i][0]
        let dat_list = data[i][1]
        chartData.push([timestampe, dat_list]);

Мой service_data - это довольно большие данные из django backend, следовательно, я не хочу использовать split или что-то еще для их преобразования.

---

Сниппет service_data:

Пожалуйста, не обращайте внимания на эти &gt и т.д., не уверен, почему HTML добавил их, но изображение самих данных является очень вложенным диктантом.

[(datetime.datetime(2022, 10, 4, 18, 35, 1, 247336, tzinfo=<UTC>), [[{'kubernetes_pod_name': 'kafka-rawbus-bravo-3', 'value': 7.5456592756413645}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-5', 'value': 6.988051860579239}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-0', 'value': 11.394453190010722}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-7', 'value': 7.905077155911794}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-4', 'value': 7.792379308708253}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-14', 'value': 10.292450756795946}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-1', 'value': 6.355755419836891}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-15', 'value': 14.111596406948182}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-16', 'value': 13.40657800705202}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-2', 'value': 6.015374411354142}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-9', 'value': 7.047300820373079}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-17', 'value': 12.68578754440751}, {'kubernetes_pod_name': 'kafka-rawbus-bravo-8', 'value': 7.800883809244761}...]

Можете ли вы, пожалуйста, предложить:

1. Способ убедиться, что контекст, который я передал в HTML, является исходным типом данных (например, список)?
2. Если контекст является строкой, то как правильно преобразовать его во вложенный массив, чтобы я мог просматривать его для диаграмм?

Вернуться на верх