Передача объекта JSON из Django в Javascript работает некорректно

Мне нужно передать объект json сценарию javascript в Django. Я использовал метод, описанный здесь:

Django: передача JSON из представления в шаблон

Вот мое мнение:

 def test_json(request):
    data = {}
    data['key'] = 'value'
    json_data = json.dumps(data)
    return render(request, 'test_json.html', {'json_data':json_data}) 

И мой шаблон:

{{ json_data|json_script:"json_data" }}
<script>
  const mydata = JSON.parse(document.getElementById("json_data").textContent);
  const keys = Object.keys(mydata);
  console.log(keys);
</script>

Но консольный вывод выглядит так:

[
  "0",
  "1",
  "2",
  "3",
  "4",
  "5",
  "6",
  "7",
  "8",
  "9",
  "10",
  "11",
  "12",
  "13",
  "14",
  "15"
]

Как будто он не распознает ключи, но распознает каждый символ объекта json как ключ, как будто не распознает структуру JSON.

Если я изменю скрипт в шаблоне следующим образом:

{{ json_data|json_script:"json_data" }}


<script>
   // const mydata = JSON.parse(document.getElementById('json_data').textContent);
//const keys = Object.keys(mydata);
//console.log(keys)
let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}'; 

const obj = JSON.parse(text); 
const keys1 = Object.keys(obj);
console.log(keys1)
</script>

Выход:

    [
  "employees"
]

Я получаю ключ правильно. Как будто в процессе подачи JSON из Django в шаблон проблема.

Есть предложения?

Спасибо.

def test_json(request):
    data = {'key': 'value'}
    return render(request, 'test_json.html', {'data': data}) 

{{ data|json_script:"json_data" }}