JSON.parse() 활용하기

개발환경

: 스프링, JSP, mysql

​

상황

: tagify라는 해쉬태그 라이브러리를 사용하면서 만들어진 Json 데이터를 가공해야 한다.

주어진 데이터는 다음과 같다.

하나의 배열 안에 같은 이름을 가진 여러 개의 JSON객체를 꺼내와야 한다.

 

[{"value":"모던한"},{"value":"깨끗한"},{"value":"자연광"},{"value":"단독대관"},{"value":"헬스"},{"value":"운동"},{"value":"인스타"},{"value":"따뜻한"},{"value":"프라이빗"},{"value":"스튜디오"}]

1. 먼저 변수에 데이터를 담는다. 이때 '' 따옴표로 감싸는 것 잊지 말기

var obj ='[{"value":"모던한"},{"value":"깨끗한"},{"value":"자연광"},{"value":"단독대관"},{"value":"헬스"},{"value":"운동"},{"value":"인스타"},{"value":"따뜻한"},{"value":"프라이빗"},{"value":"스튜디오"}]'

2. 데이터를 파싱해주고 람다식을 이용하여 데이터를 tag변수 안에 담는다.

모든 객체들의 이름이 다 동일함으로 foreach로 돌려주면된다.

나는 해쉬태그이기 때문에 데이터의 앞에 "#" 와 뒤에는 한칸을 띄어주었다.

var tags = JSON.parse(obj);
var tag = "";
tags.forEach(element => tag += "#"+ element.value + " ");
console.log(tag);

3. 가공된 데이터는 화면단에서 뿌려지면된다.

실제로는 1번의 데이터도 vo에 담겨서 들어오기때문에 객체마다 다른 데이터가 들어오게된다.

따라서 리스트를 반복문을 돌렸을때 id 값이 중복되지않도록 아이디 값 뒤에 변수를 붙혀서 각 아이디를 다르게 설정한다.

$("#tag${pv.pidx}").html(tag);