如何访问Django序列化的JSON对象

时间:2018-11-25 03:33:21

标签: javascript arrays json ajax django

我无法访问Django在JSON中序列化的对象的主键。我的JavaScript如下:

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

}

我发送blob数据(它是一个音频文件)以便在后端处理语音。后端处理音频文件并正确过滤对象。然后,它使用JSON中的queryset响应客户端。我对获取对象PK并在图库网格中显示图像感兴趣。

这是我的

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/')

我得到的Json数据如下:

[
    {
     "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]}
    }
]

我尝试过类似的事情:

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

以此类推,但我总是不确定。

预先感谢

1 个答案:

答案 0 :(得分:1)

问题是您要两次将数据序列化为JSON。一次使用data = serializers.serialize('json', objects),再一次使用JsonResponse({'data': data})。创建JsonResponse会使第一次将列表转换成大字符串的JSON逸出。

您需要删除嵌套的JsonResponse并直接传递JSON。

objects = process_speech(speech)
data = serializers.serialize('json', objects)
return HttpResponse(data)  # Pass the JSON direct to the HttpResponse

然后,您需要修改Javascript,以便它期望顶级对象是列表(没有data属性):

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