Разбор сериализованных Json от Django до Js - PullRequest
Новая
       37

Разбор сериализованных Json от Django до Js

0 голосов
/ 05 августа 2020

У меня проблема с парсингом JSON в JS. Я пишу приложение для поиска в Django - которое предназначено для поиска объектов в базе данных из-за ввода текста пользователем, оно должно возвращать JSON объекта с тем же именем, что и в ответе. JSON был сначала сериализован в Django, и после этого я хочу проанализировать его в JS, чтобы в дальнейшем использовать его на веб-интерфейсе.

Итак, цель - поиск объекта в Db-> take QuerySet объект -> сериализовать в Django -> получить его в шаблоне с помощью Json_script-> сделать его переменной в JS -> Анализировать-> Далее использовать

Просмотреть как JsonResponse для отладки: 

def search_name(request,sname):
    search_for=sname
    result = Person.objects.filter(name=search_for)
    if result == None:
        result = "No results for this query"
    serialized_result = serializers.serialize('json',result, fields=('name'))
    #kwargs = {'result':serialized_result}
    return JsonResponse(serialized_result,safe=False)

#result = "[{\"model\": \"jsonek.person\", \"pk\": 1, \"fields\": {\"name\": \"Dottore\", \"city\": \"Lublin\", \"age\": 29}}]"

Просмотр: 

def search_name(request,sname):
    search_for=sname
    result = Person.objects.filter(name=search_for)
    if result == None:
        result = "No results for this query"
    serialized_result = serializers.serialize('json',result, fields=('name'))
    kwargs = {'result':serialized_result}
    return render(request,'jsonek/result.html',kwargs)

Идет к Js: 

const sbar = document.getElementById("sbar");
const poka = document.getElementById("poka");
const confirmBtn = document.getElementById("confirm-btn");
const json = document.getElementById("result")
const json2 = '{"name":"Jan","age":25}' //test object to check if it works on normal JSON string
let result = JSON.parse(json2) //It works
console.log(JSON.parse(json)) //It Doesnt Work it Triggers error

sbar.focus();

confirmBtn.addEventListener("click",()=>{
    let query = sbar.value;
    poka.textContent=result.name;
    window.location = (window.location.href + query)
})

Шаблон: 

<!DOCTYPE html>
{% load static %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <nav>
        <div class="logo-container">
            <h2>JSON Personal DATA RECEIVER</h2>
        </div>
        <div class="search-bar"><input id="sbar" type="text" value="">
            <input id="confirm-btn" type="button" value="Search" >
        </div>
    </nav>
    <main>
        <div class="page-content">
<p id='poka'>tutaj tekst</p>
        </div>
       {{result|json_script:"result"}}
    </main>
    <script src="{% static 'js/app2.js' %}"></script>
</body>
</html>

Ошибка: 

VM161:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at app2.js:19

Почему я не мог просто разобрать его?

...