[Django] Javasrcipt에서 ORM 정보 사용하기

성격 테스트 홈페이지를 만들던 중에 model의 정보를 Javascript에서 사용해야 하는 상황이 발생하였습니다. 따라서 ORM의 정보를 html 코드에서 사용하는 것처럼 Javascript에서 사용할 수 있는지 알아보는 도중 다음의 방법을 찾았습니다.

 

let info = [
        {% for item in result_info %}
            {
                type: "{{ item.result.name }}",
                sub_title: "{{ item.sub_title }}",
                title: "{{ item.title }}",
                result_img: "{{ item.result_image.url }}",
                description_1: "{{ item.description_1 }}",
                description_2: "{{ item.description_2 }}",
            },
        {% endfor %}
    ]

 

html 코드 밑에 <script> 태그를 만들어서 위의 코드를 추가해주면 Json 형식처럼 값을 사용할 수 있게 됩니다. 이때 result_info는 16가지의 결과를 가지고 있습니다. 다음은 console 창에 info의 정보를 나타내 준 것입니다.

 

(16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
description_1: "정리된 것을 좋아하는 편입니다."
description_2: "계획에 맞게 필요한만큼만 일하는 것을 좋아합니다."
result_img: "/media/reuslt/0000.png"
sub_title: "청렴결백 논리주의자"
title: "정리의 달인"
type: "ISTJ"
__proto__: Object
1:
description_1: "관심없는 분야에는 상관을 쓰지 않는 편입니다."
description_2: "하나에 꽂히면 해결될 때까지 일에 신경씁니다."
result_img: "/media/reuslt/0001.png"
sub_title: "만능 재주꾼"
title: "설계 달인"
type: "ISTP"
__proto__: Object
.
.
.
15: {type: "ENFP", sub_title: "재기발랄한 활동가", title: "칭찬은 나를 춤추게 해", result_img: "/media/reuslt/1111.png", description_1: "일을 즉흥적이고, 마감일이 다가왔을 때 해결하는 편입니다.", …}
length: 16
__proto__: Array(0)

 

console 창에서 확인할 수 있듯이 16가지의 정보가 모두 저장된 것을 확인할 수 있습니다.