Как управлять данными JSON в javascript pass form django model?

Мне нужно динамически отображать аудио на моем сайте. Аудио представляет собой путь к файлу, хранящийся в модели Django.

Djanog Model:

class audio(models.Model):
instrumentId = models.OneToOneField(instrument, on_delete=models.CASCADE, primary_key=True)
location = models.FileField()

Я передаю данные через view.py в json-данные, чтобы мой скрипт мог прочитать данные.

view.py, PostJsonListView получает данные из модели и генерирует json-данные, testView подключается к html, отображая аудиозаписи

class PostJsonListView(View):
def get(self, *args, **kwargs):
    print(kwargs)
    #upper is to get the number from the js file to set a upper boundry
    upper = kwargs.get('num_aduios') #intial state be 3
    lower = upper - 3
    #pass in the audio in to the list [lower:upper] use to set boundry
    audios = list(audio.objects.values()[lower:upper]) 
    
    #comfirmation of no more audi to load
    audio_size = len(audio.objects.values())
    size = True if upper >= audio_size else False
    return JsonResponse({'data':audios, 'max': size}, safe=False)


class testView(TemplateView):
    template_name = 'frontend/testView.html'

JSON данные в браузере

Javascript, который передает данные, после нажатия кнопки он отображает еще три данных

    console.log('HELLO')
const aduiosBox = document.getElementById('audio-box') //get the div audio-box
const nextBtn = document.getElementById('next-btn')

let visible = 3
const handleGetData = () =>{
    $.ajax({
    type: 'GET',
    url: `/json/${visible}/`,
    success: function(response)
    {
        max_size = response.max
        //getting all the data and display in the console
        const data = response.data 
        data.map(post=>{
            console.log(post)
            aduiosBox.innerHTML +=
            //how to get the location right?
            `
            <div class="card p-3 mt-3 mb-3">
                <audio controls>
                <source src= ${post.location} type="audio/wav"> 
                </audio>


            </div>
            `
        
        })
        //check if the display size reach maxium
        if(max_size){
            console.log('done')
        }
    },
    error:function(error){
        console.log(error)
    }
    })

}

handleGetData()
//event listenrs
nextBtn.addEventListener('click', ()=>{
    visible += 3
    handleGetData()

})

Консоль в браузере

Здесь путь к аудио был из home/sound1.wav. В другом примере, где я также указываю путь к аудио объекту, путь был /sounds/sounds1.wav

view.py для рабочего примера

def survey(request):
if request.method == 'POST': #if something is post to the server, reference to HTML form method == post
    form = rateForm(request.POST)
    if form.is_valid():
        form.save()

form = rateForm()
wavFile = audio.objects.all()
return render(request, "frontend/audio.html",{
    'wavFile': wavFile,
    'form': form,
})

Пример работы

Путь к файлу моего приложения Django

В заключение, я полагаю, что веб-сайт не может получить правильный путь к файлу. home/sound1.wav VS sounds/sound1.wav. Как я могу сделать так, чтобы код Javascript мог получить правильный путь для отображения звука на сайте?

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