Невозможно индексировать разобранную строку JSON из бэкенда

Мой фронтенд должен принимать строку JSON из бэкенда и использовать ее, но когда я пытаюсь проиндексировать ее после использования JSON.parse(), он возвращает undefined. Я проверил, и он также не находится внутри массива; это просто литерал объекта JSON.

Если кто-то из вас не знаком с TypeScript, восклицательные знаки - это фишка TS, и их удаление не меняет результатов, которые я получаю.

Вот что показывает мне консоль:

console.log(document.getElementById('guestUserCredentials')!.textContent!)

"{\"EMAIL\": \"guest_user@foo.com\", \"PASSWORD\": \"foobar\"}"

console.log(JSON.parse(document.getElementById('guestUserCredentials')!.textContent!))

{"EMAIL": "guest_user@foo.com", "PASSWORD": "foobar"}

console.log(JSON.parse(document.getElementById('guestUserCredentials')!.textContent!)["EMAIL"])

undefined

Возможно, это как-то связано с тем, как мой бэкенд Django кодирует строку JSON? Как мне проверить это и исправить, если это так? Я передаю ее фронтенду React/TS следующим образом:

settings.py

...
GUEST_USER_CREDENTIALS = {
    'EMAIL': os.environ.get('GUEST_EMAIL'),
    'PASSWORD': os.environ.get('GUEST_PASSWORD'),
}
...

views.py

import json

from django.conf import settings
from django.shortcuts import render

def index(request, *args, **kwargs):

  print(settings.GUEST_USER_CREDENTIALS)
  print(json.dumps(settings.GUEST_USER_CREDENTIALS))

  return render(request, 'index.html', context={
    'GUEST_USER_CREDENTIALS': json.dumps(settings.GUEST_USER_CREDENTIALS),
  })

index.html

<!DOCTYPE html>
{% load static %}
<html>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='icon' href='{% static "frontend/favicon.ico" %}' type='image/x-icon' />
  <title>foo</title>
</head>
<body>
<div id='root'>
  <!-- React goes here. -->
</div>
</body>
{{ GUEST_USER_CREDENTIALS|json_script:"guestUserCredentials" }}
<script src='{% static "frontend/index.bundle.js" %}'></script>
</html>

Возможно, это связано с тем, как тег шаблона json_script экранирует определенные символы в строке JSON? Я не могу найти в документации ничего о том, как это может повлиять на вывод.

Вот вывод двух команд print() в views.py:

print(settings.GUEST_USER_CREDENTIALS)

{'EMAIL': 'guest_user@foo.com', 'PASSWORD': 'foobar'}

print(json.dumps(settings.GUEST_USER_CREDENTIALS))

{"EMAIL": "guest_user@foo.com", "PASSWORD": "foobar"}

Я даже попробовал разобрать строку JSON с destr вместо JSON.parse() и результат все тот же. Это было так разочаровывающе.

Я попробовал обернуть вывод JSON.parse() в другой вызов JSON.parse(), и мне удалось проиндексировать полученный объект так, как я хотел.

Я не уверен, что полностью понимаю, что происходит, но я полагаю, что не было необходимости выполнять json.dumps() в моем views.py файле, поскольку settings.GUEST_USER_CREDENTIALS уже был JSON.

Удаление json.dumps() из views.py и добавление settings.GUEST_USER_CREDENTIALS к контексту как есть устраняет необходимость двух вызовов JSON.parse() во фронтенде, и теперь все работает как ожидалось.

Вернуться на верх