Django / Ajax / Javasdript JSON.parse преобразовать строку в объект JavaScript

Question

Я использую Ajax для отправки запроса на получение от сервера, я запрашиваю и получаю конкретный продукт из модели продукта, я хочу вернуть результат в виде объектов JavaScript, но он возвращает это '{', когда я пытаюсь получить доступ первое значение из responseText [0]. Как я могу преобразовать данные, возвращаемые в объект JS. вот мой код

views.py

def edit_product(request):
    product_id = request.GET.get('product_id')
    print('THIS IS PRODUCT ID ', product_id)
    product = Product.objects.get(pk=product_id)
    data = [
    {
        'name':product.name,
        'brand':product.brand,
        'price':product.price,
        'description':product.description 

    }
]
return HttpResponse(data)

ajax.js

function getProductEditId(product_id){
            //alert(id)

document.getElementById('gridSystemModalLabel').innerHTML='<b> Edit product </b>';
            //change modal header from Add product to  Edit product
            var request = new XMLHttpRequest();
            request.open('GET', '/edit_product/?product_id=' + product_id, true);
            request.onload = function(){
                console.log('hello world', product_id)
                //var data = request.responseText
                var data = JSON.parse(JSON.stringify(request.responseText));
                console.log(data[0])

            }
            request.send();

        }

Answer 1

HTTP-ответ не может содержать словарь, вы можете передавать данные в определенном формате, например, в JSON. Django предлагает некоторые удобства для этого с JsonResponse [Django-doc] :

from django.http import <b>JsonResponse</b>

def edit_product(request):
    product_id = request.GET.get('product_id')
    print('THIS IS PRODUCT ID ', product_id)
    product = Product.objects.get(pk=product_id)
    data = [
        {
            'name':product.name,
            'brand':product.brand,
            'price':product.price,
            'description':product.description 
        }
    ]
    return <b>JsonResponse</b>(data, safe=False)

Но, как подсказывает код, это небезопасно, поскольку массив на корневом уровне был известным эксплойтом JSON .

Обычно лучше просто передать словарь (так что нет списка), и тогда параметр safe=False можно удалить. Хотя на самом деле не совсем «безопасно» просто предполагать, что все эксплойты безопасности исчезли.

В качестве альтернативы, вы можете использовать json.dumps [Python-doc] (это более или менее то, что JsonResponse делает внутри), но тогда вы, вероятно, закончите с дубликат кода.

На стороне JavaScript вам нужно всего лишь проанализировать BLOB-объект JSON для объекта JavaScript:

//change modal header from Add product to  Edit product
var request = new XMLHttpRequest();
request.open('GET', '/edit_product/?product_id=' + product_id, true);
request.onreadystatechange = function() {
    console.log('hello world', product_id)
    if(this.status == 200 && this.readyState == 4) {
        <b>var data = JSON.parse(this.responseText);</b>
        console.log(data[0])
    }
}

Мне также не очень понятно, почему вы инкапсулируете данные в список здесь: если ответ всегда содержит один элемент, имеет смысл просто передать словарь.