개인프로젝트/mix

프론트로 값줄때 JSON으로 돌려주기

슬픈강낭콩 2023. 1. 23. 15:35

원래는 arraylist로 객체를 받아서 넘겨 주었다. 근데 문제가 화면을 보여줄때 아래처럼 보여준다. 이것을 보기 쉽게 하고싶어서 json으로 전달해주기로 했다.

 

 

새로운 dependencies를 추가하고 사용한다.

 

implementation 'com.googlecode.json-simple:json-simple:1.1.1'

를 추가해주고

 

만든리스트를

JSONObject obj = new JSONObject();
obj.put("item", allcoreList);

넣어줬는데

이렇게 아이템 하나로 나왔다. 가공을 해서 넘겨줘야 할것같다.

 

아래처럼 해주니 잘 나온다.

JSONArray Arrayaobj = new JSONArray();
for (int i=0; i < allcoreList.size(); i++)
{
    JSONObject sobj = new JSONObject();
    sobj.put("core_id", allcoreList.get(i).getCore_name());
    sobj.put("min_lv", allcoreList.get(i).getMin_lv());
    sobj.put("max_lv", allcoreList.get(i).getMax_lv());
    sobj.put("main_core", allcoreList.get(i).getMain_core());
    sobj.put("sub_core", allcoreList.get(i).getSub_core());
    Arrayaobj.add(sobj);
}
System.out.println("Arrayaobj = " + Arrayaobj);

Arrayaobj = [{"core_id":"데미네펜데스","main_core":"버그키스(4단계)","max_lv":230,"sub_core":"드라키스(4단계)","min_lv":205},{"core_id":"버그키스","main_core":"미스칸(4단계)","max_lv":230,"sub_core":"버그칸(4단계)","min_lv":205},{"core_id":"미스칸","main_core":"미스카(4단계)","max_lv":210,"sub_core":"메타카(4단계)","min_lv":185},{"core_id":"미스카","main_core":"미스쿤(3단계)","max_lv":190,"sub_core":"플라쿤(3단계)","min_lv":165},{"core_id":"미스쿤","main_core":"미스쿠(3단계)","max_lv":170,"sub_core":"버드쿠(3단계)","min_lv":145},{"core_id":"미스쿠","main_core":"에보미스코(3단계)","max_lv":150,"sub_core":"에보비스코(3단계)","min_lv":125},{"core_id":"에보미스코","main_core":"ㅌ","max_lv":125,"sub_core":"ㅌ","min_lv":100},{"core_id":"ㅌ","main_core":null,"max_lv":0,"sub_core":null,"min_lv":0},{"core_id":"ㅌ","main_core":null,"max_lv":0,"sub_core":null,"min_lv":0},{"core_id":"에보비스코","main_core":"ㅌ","max_lv":125,"sub_core":"ㅌ","min_lv":100},{"core_id":"버드쿠","main_core":"에보버드코(3단계)","max_lv":150,"sub_core":"에보드라코(3단계)","min_lv":125},{"core_id":"플라쿤","main_core":"플라쿠(3단계)","max_lv":170,"sub_core":"비스쿠(3단계)","min_lv":145},{"core_id":"메타카","main_core":"메타쿤(3단계)","max_lv":190,"sub_core":"비스쿤(3단계)","min_lv":165},{"core_id":"버그칸","main_core":"버그카(4단계)","max_lv":210,"sub_core":"데빌카(4단계)","min_lv":185},{"core_id":"드라키스","main_core":"플라칸(4단계)","max_lv":230,"sub_core":"데빌칸(4단계)","min_lv":205}]

 

프론트에서는 map을 이용해서 데이터를 하나씩 뽑아서 사용했다.

const [corelist, setCoreList] = useState([{
    core_name: "",
    min_lv: "",
    max_lv: "",
    main_core: "",
    sub_core: "",
}]);
const printList = corelist.map((list) => (
    <div>
        {list.core_name}
        {list.min_lv}
        {list.max_lv}
        {list.main_core}
        {list.sub_core}
    </div>
))

참고 : 

https://humble.tistory.com/20