How to manage JSON data in javascript pass form django model?

Question

I need to dynamically display my audio on my website. The audio is a file path stored in the Django model.

Djanog Model:

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

I pass the data through view.py into json data so my script can read the data.

view.py, PostJsonListView fetch data form the model and generate json data, testView connect to the html displaying audios

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 data in browser

Javascript that hand the data, after a button click, it would display three more data

    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()

})

Console on the browser

Here, the audio path was from home/sound1.wav. From my another exmaple, where I also path audio object, has the path of /sounds/sounds1.wav

view.py for the working example

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,
})

Working example

File path of my Django app

In conclusion, I belive the website cannot get to the file path correctly. home/sound1.wav VS sounds/sound1.wav. How can I manage it so the Javascript code can get to the correct path to get the audio to display in the website?

Answer 1

I solved it by correcting the directory of my audio file. For anyone that is wondering the something, you should look at what have done to your setting.py for the directory of storing data you wanted to access