Почему имя ключа не определено при попытке отобразить значение ключа в html?

Я пытаюсь отобразить данные базы данных в html с помощью Javascript fetch api. Я просмотрел множество материалов по этой проблеме, но, похоже, ничего не работает. Однако я могу отобразить все данные в формате json без проблем. Проблема возникает, когда я ссылаюсь на имена полей моей модели (имена ключей) в javascript. sun_from_hour возвращает неопределенное значение. Это проблема с обозначениями? Я пробовал несколько решений.

class SundayTime(models.Model):
    sun_teacher_id_time = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=True, blank=True,
                                            default='',
                                            related_name='sun_teacher_time_available_id')
    sun_from_hour = models.TimeField(null=True, blank=False)
    sun_to_hour = models.TimeField(null=True, blank=False)


class SunJsonListView(View):
    def get(self, *args, **kwargs):
        times = list(SundayTime.objects.values('sun_from_hour', 'sun_to_hour'))
        return JsonResponse({'times': times}, safe=False)

const sunButton = document.getElementById('sun_availability_show');
const sunContainer = document.getElementById('sun_availability_div');
const sunUrl = '/daily_appointment_availability-sun_json/'
sunButton.addEventListener('click', reqSunData);


function reqSunData() {
    fetch(sunUrl, {
        method: "GET",
    })
        .then((response) => {
            return response.json();
        })
        .then(times => sunAdder(times))
        .catch((error) => {
            console.error(error);
        })
}

function sunAdder(times) {
    console.log(times);
    const ul = document.createElement('ul');
    sunContainer.append(ul);
    
    Object.keys(times).forEach(timeData => {
        console.log(Object.values(times));
        const li = document.createElement('li');
        li.insertAdjacentHTML('beforeend', `<li>[${times.sun_from_hour}]</li>`);
        // here sun_from_hour is undefined
        li.textContent = JSON.stringify(times);

        ul.append(li);
    })
}

// the json data that is displayed in html 
// {"times":[{"sun_from_hour":"00:00:00","sun_to_hour":"00:45:00"}, 
// {"sun_from_hour":"01:30:00","sun_to_hour":"01:45:00"}]}

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