[DJANGO] 파이썬의 list 자바스크립트에서 array로 받기

 

파이널 프로젝트 views.py에서 맥주 이름들을 리스트로 저장하고 이를 html에 넘겨줬다.

이 넘겨받은 값들을 스크립트에서 for문으로 다루고 싶어 배열처럼 다뤄야 해야하는데 잘 되지 않는다.

파이썬의 리스트를 스크립트에서 바로 배열로 처리하지 못하는듯 하다..

찾아보니 파이썬에서 json 라이브러리를 써서 json형태로 전달하는게 보통 하는 방식인거같은데 맥주 이름이 70개 이하로 많지 않아서 그냥 간편한 방법으로 해결했다.

 

 

[참고] Python list vs Javascript Array https://agvim.wordpress.com/2017/08/22/python-list-vs-javascript-array/

Python list vs. JavaScript Array

 

 

전달하려는 데이터

beer_list = pd.read_csv('맥주이름.csv', encoding='utf-8', index_col=0)
beer_list = beer_list['맥주']

 

 

python list → javascript array

원래 데이터형인 데이터프레임에서 리스트로 바꿔서 한번 넘겨줘봤다.

 

views.py

beer_list = beer_list.tolist()
return render(request, 'beer/ver2.html', {'beer_list': beer_list})

파이썬에서는 리스트 형태로 잘 바뀌는데 스크립트에서 받은걸 보면

 

ver2.html

console.log({{beer_list}})

beer_list = {{beer_str}};
console.log(beer_list.length)

뭔가 이상하게 값이 들어간다.

 

 

python list → str → javascript array

리스트를 연결해 중간중간 구분자를 넣어 하나의 긴 문자열로 만들고 스크립트에서 그 그분자로 나눠 다시 배열로 만들어줬다.

조금 비효율적인 방법인거같긴한데 리스트의 길이가 짧은 경우 간간히 사용하기에는 나쁘지 않은 것 같다.

 

views.py

beer_str = '//'.join([str(i) for i in list(beer_list)])
return render(request, 'beer/ver2.html', {'beer_str': beer_str})

맥주 이름 중간에 ,나 . 가 들어가는 경우가 있어 구분자를 // 로 주었다.

 

ver2.html

beer_list = '{{beer_str}}'.split('//');

그냥 {{beer_str}} 하면 문자열 형이 아니라 문자열 자체가 들어가게되어 ''로 묶어줬다(문자열이라고 선언해줬다)

해보진 않았는데 문자열로 변환하는 메서드를 써도 될듯 하다! 그렇게 하는게 더 직관적이고 정확한거 같기도 하고..

이렇게 문자열에서 배열로 잘 바뀌고 셀렉트박스 옵션에도 잘 추가된다.

 

 

python list → json → javascript array

팀플할때 참고했던 코드에 json으로 전달했길래 나도 한번 해보았당

 

from django.utils import simplejson

구글링해서 찾아봤을 때 장고에서 위와 같은 라이브러리도 쓰던데 이상하게 나는 저 라이브러리 import가 안된다.

그냥 json 라이브러리를 사용해야겠다.

 

json으로 만들기 전 아까 위의 데이터프레임을 dict 형태로 바꿔준다. 그렇게하면 내가 보낼 데이터는

 

views.py

beer_list = json.dumps(beer_list.to_dict())
return render(request, 'beer/ver2.html', {'beer_list': beer_list})

ver2.html

beer_list = {{beer_list}};
console.list(beer_list[0]);

역시나 이상하게 들어가는 모습,,

 

 

&quot 는 html에서 "쌍따옴표" 라고 한다!!

https://ascii.cl/htmlcodes.htm

HTML Codes - Table of ascii characters and symbols

 

replace 메서드로 해결이 안되어 찾아보니 python에서 넘어온 json 객체를 받으려면 이렇게 받아야한다고 한다.

 

ver2.html

beer_list = {{beer_list | safe}};

딕셔너리 형태로 잘 받아와진다.

 

타입을 찍어보면

typeof(beer_list) // object

키로 딕셔너리의 값을 조회하면

beer_list["0"] // Asahi Super Dry

 

이번에는 jQuery의 $.each() 메서드를 이용하여 셀렉트박스의 옵션을 추가해보았다.

 

ver2.html

$.each(beer_list, function(key, obj){ 
    console.log(obj)
    $('#selectBeerName' + cnt).append($('<option />', {
        value: obj,
        text: obj
    }))
});

.each 메서드를 잘 돌아서 옵션 추가도 잘 된다.

 

---

 

 

맥주 이름이 많지 않아 그냥 하나의 긴 문자열로 데이터를 전달했지만 json 형태로 전달하는 것이 더 좋은 방법인 것 같다.

특히나 $.each()가 object나 array타입 모두 사용 가능한 반복 메서드라 한가지 방법으로 통일시켜 쓰는게 좋을 것 같다.

 

이렇게 또 하나 배웠구망