[javascript] JSON.parse() 을 사용하여 python 데이터 사용하기

js 로 Django 값 받아오기

기본적으로 Django의 파이썬 변수는 템플릿 변수를 통해서 값을 넘겨준다. 하지만 기본적인 템플릿 변수만으로는 제한사항이 있었다. 우선 파이썬 views.py 에서 정의한 딕셔너리 타입의 값을 js 로 넘겨주고자 하였다.

view.py

choices = Choice.objects.filter(vote_id=cat.vote.id)
choices_name = [choice.as_dict() for choice in choices]

as_dict() 는 models.py 에서 정의한 메소드로 model.py의 일부는 다음과 같다.

models.py

class Choice(models.Model):
    vote = models.ForeignKey(Vote,on_delete=models.CASCADE)
    name = models.CharField(max_length=20)
    count = models.IntegerField(default=0)

    def __str__(self):
        return self.name

    def as_dict(self):
        return {'name':self.name}

결과적으로 choices_name 에는 filter를 통해 원하는 데이터들이 아래와 같은 형식으로 담기게 된다.

[{'name': '이름1'}, {'name': '이름2'}, {'name': '이름3'}]

그리고 이를 render 함수를 통해서 choices_name 라는 이름으로 detail.html 로 넘겨주었다.

detail.html

const choices_string = "{{ choices_name }}";

탬플릿 변수를 통해 값을 가지고 왔지만 이를 활용할 수 가 없었다. string 타입이기 때문에 반복문을 통한 접근도 [,{,' 에 하나씩 접근을 하고 name 을 통한 key 값으로 접근을 하려고 해도 당연히 안되었다. 그리고 데이터의 결과값이 특이했다.

[{'name': '성비니'}, {'name': '민성'}, {'name': '강민성'}]

' (작은 따음표) 를 사용하기 위해서 &#39 이 부분이 추가되었고 replace 를 통해 데이터를 원하는 모양으로 바꿔주었다.

const choices_string = "{{ choices_name }}".replace(/'/g, "\"");

// [{"name": "이름1"}, {"name": "이름2"}, {"name": "이름3"}]

이제 string 타입을 우리가 사용할 수 있게 바꿔줘야한다.

JSON.parse()

이럴 경우 사용하는 게 바로 JSON.parse() 이다. parse 메소드는 string 객체를 json 객체로 변환시켜서 우리가 활용할 수 있게 만들어준다.

const choices_name = JSON.parse(choices_string)

이럴 경우, 길이반환 및 key값으로 접근도 원하는대로 가능해서 추가적인 작업이 가능해졌다.