Wsrtjtyk

I'm not able to access primary key of an object serialized by Django in JSON. My JavaScript looks like:

function makeLink() {

    recorder && recorder.exportWAV(function (blob) {

        let fd = new FormData;

        fd.append("audio", blob);

        let csrftoken = getCookie('csrftoken');

        let xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {

                var obj = JSON.parse(this.responseText);

                /*console.log(obj[0].pk);*/

                document.getElementById("result").innerHTML = obj.data[0]['pk'];

            }

        }



        xhr.open('POST', uploadAudio_url , true)

        //alert(uploadAudio_url)

        xhr.setRequestHeader("X-CSRFToken", csrftoken);

        xhr.onload = function () {

            // __log("Audio Uploaded to server succesfully");

        };

        xhr.onerror = function (e) {

            // __log("Error Uploading audio" + e)

        };



        xhr.send(fd);

    });



}

I send the blob data which it is an audio file in order to process speech in the backend. The backend process the audio file and filter the objects properly. Then it response to the client with a queryset in JSON. I have interested in get the objects PK and show images in a gallery grid.

This is my

Views.py:

def process_speech(recognized_audio):

    speech = recognized_audio

    url = ''  # Is the URL where the user will be redirected once speech is proccessed

    keylist = 

    for key in Keyword.objects.all():

        if(speech.find(key.keyword.lower()) != -1):

            keylist.append(key.keyword)



    print('Identificado Keyword: ', keylist)

    if (speech.find('fotos') != -1 or speech.find('fotografías') != -1):

        print("Reconocido FOTO")

        imagenes_filtered = Imagen.objects.filter(keyword__keyword__in=keylist)

        #print(imagenes_filtered)

        return imagenes_filtered

    if (speech.find('video') != -1):

        print("Reconocido VIDEO")



def upload(request):

    print("Método: ", request.method)

    print("Ajax: ", request.is_ajax())

    if request.method == 'POST':

        if request.FILES.get('audio'):

            record_audio = request.FILES['audio']

            fs = FileSystemStorage()

            filename = fs.save(record_audio.name + ".wav", record_audio)

            uploaded_file_url = fs.url(filename)

            print("File received succesfully")

            speech = decodeSpeech(filename)

            print(speech)

            objects = process_speech(speech)

            data = serializers.serialize('json', objects)

            return HttpResponse(JsonResponse({'data': data}, safe=False),)

        else:

            return render_to_response('index.html', {"errors":"No recognized audio"})

    else:

        return HttpResponseRedirect('/home/')

The Json data i get is as follow:

[

    {

     "model": "Galeria.imagen", 

     "pk": 20, 

     "fields": 

                {"image_width": 6000, 

                "image_height": 4000, 

                "fichero_imagen": "files/img/lucas-albuquerque-615558-unsplash.jpg", 

                "keyword": [17, 18]}

    }, 

    {

     "model": "Galeria.imagen", 

     "pk": 21, 

     "fields": 

                {"image_width": 5855, 

                 "image_height": 3860, 

                 "fichero_imagen": "files/img/freestocks-org-794156-unsplash.jpg", 

                 "keyword": [18]}

    }

]

I have tried things like:

• obj.data[0].pk


• obj.data[0][pk]


• obj.data[0].['pk']


• obj.data.pk[0]

and so on, but I always get undefined.

Thanks in advance

The issue is that you're serializing your data into JSON twice. Once with data = serializers.serialize('json', objects) and again with JsonResponse({'data': data}). Creating the JsonResponse escapes the JSON from the first call turning the list into a big string.

You'll need to remove the nested JsonResponse and pass the JSON directly.

objects = process_speech(speech)

data = serializers.serialize('json', objects)

return HttpResponse(data)  # Pass the JSON direct to the HttpResponse

You'll then need to modify your Javascript so that it expects the top level object to be a list (no data property):

document.getElementById("result").innerHTML = obj[0]['pk'];