Serialized object for Javascript

Using Django Templates & Frontend
1

Hello everyone,

Here I have a problem, it is a bit out of Django topic but I need a help. I pass serialized editablePID to base.html which is Javascript area. I want to iterate each item in editablePID data(I’ve put some of the output in the console below)

What I want to iterate is patientid value, birthday date and so on… But it just prints the characters( [, O, r, …). When I write console.log(type of jsonData) it says jsonData is string. Do you have any idea how to iterate serialized data and have all items in it? Thanks in advance.

views.py

editablePID = Epi_dataSerializer(Epi_data.objects.all().order_by('id'), many=True)
    
return render(request, 'home.html', {'editablePID':editablePID.data, 'form': form})

base.html

<script>
var obj = JSON.parse('{{ editablePID | safe }}');
console.log(obj);
</script>

Output

[OrderedDict([(‘patientid’, ‘Z0FBQUFBQmpoZWllM0ZlMWkzQ1BlRklKNTNMRHhhZEZwQVhnaVE2UV9JLXdWajFHZ1BTcmpyMWxHQm1UQVFCUEFxbkJQbmZsMVJsWmRJLUpqbEU3OFRMZDBMcFZqekxWM1E9PQ==’), (‘bday’, ‘2014-06-12’), …

2

Take a look into the template tag json_script

3

Also see JSON.parse() - JavaScript | MDN

4

Hello,
Thank you for answer. When I get the data like this var obj = JSON.parse(‘{{ editablePID | safe }}’) it gives me weird error at console.

Uncaught SyntaxError: missing ) after argument list

I’m sure that there is no missing ) or extra ) when I click the error link, it directs me to line below(I took screenshot of consol → source). Do you have any idea? Thank you

Ekran Resmi 2022-12-14 17.00.03
Ekran Resmi 2022-12-14 17.00.03780×68 8.3 KB

5

I’d need to see the exact js script you are rendering along with the complete text (not screenshot) of the console message.

6

Well, this is the complete data that I want to render. When I click the (dizin):3897:30 below, it directs me to error message under source of console. Somehow {{ editablePID|escapejs }} gets the data but error occurs, I think it is because indentation or something?

Uncaught SyntaxError: missing ) after argument list (at (dizin):3897:30)

error

  var obj = JSON.parse('[OrderedDict([('patientid', 'Z0FBQUFBQmpoZWllM0ZlMWkzQ1BlRklKNTNMRHhhZEZwQVhnaVE2UV9JLXdWajFHZ1BTcmpyMWxHQm1UQVFCUEFxbkJQbmZsMVJsWmRJLUpqbEU3OFRMZDBMcFZqekxWM1E9PQ=='), ('bday', '2014-06-12'), ('age', 11), ('gender', 'Male'), ('born_country', 'Spain'), ('foreigner', 'No'), ('year_arrival', '2022'), ('date_arrival', '2022-11-17'), ('residence', 'Yes'), ('postcode', '46022'), ('occupation', 'Child'), ('work_place', 'Valencia'), ('symptoms_presence', 'SP'), ('general_symp', 'GS'), ('respiratory_symp', 'RS'), ('symptoms_onset', '2022-12-01'), ('diagnostic_date', '2022-11-15'), ('treatment_start', '2022-11-15'), ('year_declaration', '2022'), ('date_declaration', '2022-11-01'), ('dto_declaration', 'DD'), ('proc_declaration', 'PD'), ('province_declaration', 'PD'), ('risk_dto', 'RD'), ('case_type', 'CT'), ('outbreak', 'O'), ('outbreak_code', 1), ('previous_contact', 'PC'), ('contact_tracing', 'CT'), ('contacts_surveyed', 1), ('contacts_infected', 1), ('home_partners', 1), ('risk_partners', 1), ('disease_localization', 'DL'), ('disease_history', 'DH'), ('mantoux', 'M'), ('sputum_smear', 'SS'), ('epi_data_culture', 'EDC'), ('chest_xray', 'CX'), ('treatment', 'T'), ('resh', 'rh'), ('resr', 'rr'), ('ress', 'rs'), ('resz', 'rz'), ('rese', 're'), ('hospitalisation', 'H'), ('hosp_admission_date', '2022-11-11'), ('hosp_discharge_date', '2022-11-16'), ('epi_data_hospitals', OrderedDict([('name', 'HOSPITAL DE LA RIBERA'), ('address', 'Ribera'), ('contact', 'ContactR'), ('phone', '111-222-555'), ('email', 'ribera@gmail.com'), ('comments', 'Comments')])), ('alcohol_abuse', 'AA'), ('diabetes', 'D'), ('neoplasia', 'N'), ('pdu', 'PDU'), ('hiv_infected', 'HIV'), ('homeless', 'H'), ('immigrant', 'I'), ('passerby', 'P'), ('healthcare_worker', 'HW'), ('imprisonment', 'IM'), ('nursing_home', 'NH'), ('dot', 'D'), ('outcome', 'O')]), OrderedDict([('patientid', 'Z0FBQUFBQmpoZXNhcktiUnBmdWRmRWdDZGc2OU90NUpaSFBHa2JoaXlldzlzeWNuSE5nN3g5NDQtemRxZ2RhRjBlenhLTXYxLVIxUnd0Mzk5eERzVHNtZVlhdjhoRklrcnc9PQ=='), ('bday', '1998-06-12'), ('age', 24), ('gender', 'Female'), ('born_country', 'Spain'), ('foreigner', 'No'), ('year_arrival', '2020'), ('date_arrival', '2020-11-12'), ('residence', 'Yes'), ('postcode', '46033'), ('occupation', 'IT'), ('work_place', 'Valencia'), ('symptoms_presence', 'SP'), ('general_symp', 'GS'), ('respiratory_symp', 'RS'), ('symptoms_onset', '2022-12-01'), ('diagnostic_date', '2022-11-23'), ('treatment_start', '2022-11-15'), ('year_declaration', '2022'), ('date_declaration', '2022-11-10'), ('dto_declaration', 'DD'), ('proc_declaration', 'PD'), ('province_declaration', 'PD'), ('risk_dto', 'RD'), ('case_type', 'CT'), ('outbreak', 'O'), ('outbreak_code', 3), ('previous_contact', 'PC'), ('contact_tracing', 'CT'), ('contacts_surveyed', 1), ('contacts_infected', 1), ('home_partners', 1), ('risk_partners', 1), ('disease_localization', 'DL'), ('disease_history', 'DH'), ('mantoux', 'M'), ('sputum_smear', 'SS'), ('epi_data_culture', 'EDC'), ('chest_xray', 'CX'), ('treatment', 'T'), ('resh', 'rh'), ('resr', 'rr'), ('ress', 'rs'), ('resz', 'rz'), ('rese', 're'), ('hospitalisation', 'H'), ('hosp_admission_date', '2022-11-17'), ('hosp_discharge_date', '2022-11-10'), ('epi_data_hospitals', OrderedDict([('name', 'HOSPITAL DE LA RIBERA'), ('address', 'Ribera'), ('contact', 'ContactR'), ('phone', '111-222-555'), ('email', 'ribera@gmail.com'), ('comments', 'Comments')])), ('alcohol_abuse', 'AA'), ('diabetes', 'D'), ('neoplasia', 'N'), ('pdu', 'PDU'), ('hiv_infected', 'HIV'), ('homeless', 'H'), ('immigrant', 'I'), ('passerby', 'P'), ('healthcare_worker', 'HW'), ('imprisonment', 'IM'), ('nursing_home', 'NH'), ('dot', 'D'), ('outcome', 'O')]), OrderedDict([('patientid', 'Z0FBQUFBQmptSWtySWMwYW9HS3FSeDN2cExjdXBqeVNjRFdmc1NXd3hGY003dnBkTGN6Y3NPc1FtY0F0YlpSWTBrUEtJRUtGSVNVVWRJTTRvcjdpNUM0a3M3NG5GbVEzTlE9PQ=='), ('bday', None), ('age', None), ('gender', ''), ('born_country', ''), ('foreigner', ''), ('year_arrival', None), ('date_arrival', None), ('residence', ''), ('postcode', ''), ('occupation', ''), ('work_place', ''), ('symptoms_presence', ''), ('general_symp', ''), ('respiratory_symp', ''), ('symptoms_onset', None), ('diagnostic_date', None), ('treatment_start', None), ('year_declaration', None), ('date_declaration', None), ('dto_declaration', ''), ('proc_declaration', ''), ('province_declaration', ''), ('risk_dto', ''), ('case_type', ''), ('outbreak', ''), ('outbreak_code', None), ('previous_contact', ''), ('contact_tracing', ''), ('contacts_surveyed', None), ('contacts_infected', None), ('home_partners', None), ('risk_partners', None), ('disease_localization', ''), ('disease_history', ''), ('mantoux', ''), ('sputum_smear', ''), ('epi_data_culture', ''), ('chest_xray', ''), ('treatment', ''), ('resh', ''), ('resr', ''), ('ress', ''), ('resz', ''), ('rese', ''), ('hospitalisation', ''), ('hosp_admission_date', None), ('hosp_discharge_date', None), ('epi_data_hospitals', OrderedDict([('name', 'HOSPITAL DE LA RIBERA'), ('address', 'Ribera'), ('contact', 'ContactR'), ('phone', '111-222-555'), ('email', 'ribera@gmail.com'), ('comments', 'Comments')])), ('alcohol_abuse', ''), ('diabetes', ''), ('neoplasia', ''), ('pdu', ''), ('hiv_infected', ''), ('homeless', ''), ('immigrant', ''), ('passerby', ''), ('healthcare_worker', ''), ('imprisonment', ''), ('nursing_home', ''), ('dot', ''), ('outcome', '')])]');
7

What does your original template script look like?

What I’m thinking is that it’s an “embedded quote” issue. It’s showing single quotes to encapsulate the entire string, when the encapsulated string contains single quotes.

8

I just realized - the text you’re trying to parse isn’t valid JSON. At a minimum, having the literal "OrderedDict’ where it’s at in the string isn’t valid.

You don’t show your Epi_dataSerializer, but that’s what’s going to need to be fixed.

9

Sorry for the late answer. Here it is my Epi_data serializer.

class Epi_dataSerializer(serializers.ModelSerializer):
    epi_data_hospitals = HospitalsSerializer(read_only=True)

    class Meta:
        model = Epi_data
        fields = ['patientid', 'bday', 'age', 'gender', 'born_country', 'foreigner', 'year_arrival', 'date_arrival', 'residence', 'postcode', 'occupation', 'work_place', 'symptoms_presence', 'general_symp', 'respiratory_symp', 'symptoms_onset', 'diagnostic_date', 'treatment_start', 'year_declaration', 'date_declaration', 'dto_declaration', 'proc_declaration', 'province_declaration', 'risk_dto', 'case_type', 'outbreak', 'outbreak_code', 'previous_contact', 'contact_tracing', 'contacts_surveyed', 'contacts_infected', 'home_partners', 'risk_partners', 'disease_localization', 'disease_history', 'mantoux', 'sputum_smear', 'epi_data_culture', 'chest_xray', 'treatment', 'resh', 'resr', 'ress', 'resz', 'rese', 'hospitalisation', 'hosp_admission_date', 'hosp_discharge_date', 'epi_data_hospitals', 'alcohol_abuse', 'diabetes', 'neoplasia', 'pdu', 'hiv_infected', 'homeless', 'immigrant', 'passerby', 'healthcare_worker', 'imprisonment', 'nursing_home', 'dot', 'outcome']
10

So it appears that the root issue is that you’re passing a data structure to the template engine, and the template is set up to render it directly as a string.

As @leandrodesouzadev pointed out, you still should be using the json_script tag on the Django side for the rendering process.

1 Like