[JavaScript] ajax에서 값 받아와 json Data 만들기

서버사이드가 아닌 클라이언트 사이드에서 json Data를 만들고자한다.

먼저 json 데이터를 만들기 위한 전역 변수를 선언한다.

var treeData = new Array();
var treeData2 = new Array();
var treeData3 = new Array();

이후, ajax에서 agency 값들을 받아와 원하는 정보를 tree에 저장한 후,

String 형태로 변환 JSON.stringify() 를 이용하여 treeData2에 데이터를 저장하고

String Data를 다시 사용할 수 있는 json 데이터로 만들기 위하여 JSON.parse()를 이용하여 treeData3에 저장하는 코드이다.

 

//Agency Information
        $.ajax({
            url: HOST+"/api/agency",
            type: "GET",
            success:function(data, textStatus, request) {

                const length = data.Message.Info.length;
                //const id = data.Message.Info.length
                console.log(length);
                console.log(data)

                for(let i = 0; i < length; i++){
                    const option = data.Message.Info[i].ID;
                    if(data.Message.Info[i].PreAgencyName === ""){
                        data.Message.Info[i].PreAgencyName = "#";
                    }
                    // 상태에 따라 disabled 변경 코드 추가
                    const tree = {
                        id: data.Message.Info[i].ID,
                        parents: data.Message.Info[i].PreAgencyName,
                        text: data.Message.Info[i].ID,
                        date: "default",
                        state: {
                            "selected":false,
                            "checked":false,
                            "opened":true,
                            "disabled":false,
                            "flag": 0,
                        },
                    }
                    treeData.push(tree);
                    //console.log(option);
                    console.log(tree);
                    //$('#agencySelect').append(option);
                }

                treeData2 = JSON.stringify(treeData);
                treeData3 = JSON.parse(treeData2)
                console.log(treeData3)

                //console.log(memberInfos);
            },
            error:function(data, textStatus, request){
                console.log("Error: ");
                console.log(data);
            }
        });

저장된 treeData3를 console에 출력해보면 다음과 같이 출력된다.

(3) [{…}, {…}, {…}]
  0:
    date: "default"
    id: "agnecy2Sub"
    parents: "agency2"
    state: {selected: false, checked: false, opened: true, disabled: false, flag: 0}
    text: "agnecy2Sub"
    [[Prototype]]: Object
  1:
    date: "default"
    id: "agency2"
    parents: "deathquin"
    state: {selected: false, checked: false, opened: true, disabled: false, flag: 0}
    text: "agency2"
    [[Prototype]]: Object
  2:
    date: "default"
    id: "deathquin"
    parents: "#"
    state: {selected: false, checked: false, opened: true, disabled: false, flag: 0}
    text: "deathquin"
  [[Prototype]]: Object
  length: 3
  [[Prototype]]: Array(0)

 

참고 블로그 : https://fruitdev.tistory.com/190