HTML 데이터 속성(data-)에서 JSON 사용하기

HTML 데이터 속성(data-)에서 JSON을 사용하려면 아래와 같은 코드를 사용하면 된다.

 

※ 주의할 점은 HTML 데이터 속성(data-)값의 바깥 영역을 작은 따옴표( ' )로 감싸고, JSON 데이터의 key값과 value값을 큰 따옴표( " )로 감싸 주어야 한다. 그리고 JSON 데이터의 마지막에는 콤마/쉼표( , )를 찍지 않는다. 꼭 아래와 같은 JSON 코드 형식에 맞게 작성해 주어야만 에러 없이 자바스크립트에서 JSON 파싱이 가능하다.

<div data-json='{
    "name": "짱구", 
    "age": 5,
    "friends":[
        {"name":"철수", "age": 5},
        {"name":"훈이", "age": 5},
        {"name":"맹구", "age": 5},
        {"name":"유리", "age": 5},
        {"name":"수지", "age": 5}
    ]
}'></div>
    
<!-- 스크립트 -->
<script>
    var data = document.querySelector('div').getAttribute('data-json');
    console.log(JSON.parse(data));
</script>