Как из словаря с ключем забрать список Javascript

Question

У меня есть словарь, внутри которого есть список. Мне нужно забрать этот список и вывести всё на страницу в красивом виде.

Если что словарь приходит из Backend Django

Вот что прилетает в console.log

А это то, что в терминале

На всякий случай вот мой views.py

 from django.shortcuts import render
 import json

 def index(request):
 spisok = main.start.lists
 data = {
     'count': spisok,
 }
 var = json.dumps(data)
 context = {"count":var}

 print(var)
 return render(request, 'main/index.html', context)

И ещё index.html

<div class="content">
<div class="task" id="span-task"></div>
<br>
<button class="btn-next" id="next-button">Проверить</button>
{% comment %} <script>console.log({{count|safe}}) </script> {% endcomment %}
<script>
var data = {{count|safe}}
GetTask(data)
</script>
</div>

Как всё это сделать на JavaScript не знаю

Answer 1

У вас приходит ответ от сервера в виде объекта, свойство count которого имеет значение массива. Я написал функцию, которая принимает аргумент в виде массива, проходится по нему встроенным методом массивов forEach(), добавляя содержимое каждого элемента массива в элемент списка #tasks в макете HTML при нажатии кнопки.

При нажатии кнопки срабатывает событие onclick (описать действия при событии можно в атрибуте, либо в самом js как document.querySelector(ваш_селектор).onclick) и запускается функция с нужным аргументом, у меня это свойство объекта obj (obj.count), а у вас это будет выглядеть как data.count, если вы ответ помещаете в переменную data.

Чтобы избежать ошибок последовательности исполнения скриптов, я добавил проверку на тип данных у аргумента функции (null является объектом в JavaScript, однако это ошибка языка). В примере есть строчки, которые вам не нужны, они для имитации ответа сервера.

Справка:

forEach()
DOM Events
querySelector()
Типа данных JavaScript

//строчки, которые вам нужно удалить, это для воспроизведения примера
let obj = {
  count: ['9 + 6', '5 + 3 ', '1 + 7', '7 + 10']
}
//строчки, которые вам нужно удалить, это для воспроизведения примера

function getTask(data) {
  if (typeof data === 'object' && data !== null) {
    let i = 0;
    document.querySelector('#next-button').onclick = ()=> {
      if(i < data.length) {
        document.querySelectorAll('#tasks li')[i].innerHTML = data[i];
        i++;
      }  
    };
    
  } else {
    return;
  }
}

getTask(obj.count);

<button class="btn-next" id="next-button">Проверить</button>

<ul id="tasks">
 <li></li>
 <li></li>
 <li></li>
 <li></li> 
</ul>

<script>
//var data = {{count|safe}}
//GetTask(data)
</script>

БЛОГ НА HUSL

Как из словаря с ключем забрать список Javascript

Ответы (1 шт):