📅 TIL #29

const message = {
  sender: "이우성",
  receiver: "네이버",
  message: "저를 데려가세요!",
  createdAt: "2021-02-15 21:08:10"
};

let transferableMessage = JSON.stringify(message);

console.log(transferableMessage);
// {"sender":"이우성","receiver":"네이버","message":"저를 데려가세요!","createdAt":"2021-02-15 21:08:10"}

let packet = {sender: "이우성", receiver: "네이버", message: "저를 데려가세요!", createdAt: "2021-02-15 21:08:10"};

let obj = JSON.parse(packet);

console.log(obj);
/*  
{
  sender: "이우성",
  receiver: "네이버",
  message: "저를 데려가세요!",
  createdAt: "2021-02-15 21:08:10"
};
*/

function stringifyJSON(obj) {
  //TODO: recursive base
  if (typeof obj === "number" || obj === null || typeof obj === "boolean") {
    return `${obj}`;
  } else if (typeof obj === "string") {
    return `"${obj}"`;       // 문자열은 쌍따옴표를 한 번 더 붙여줘야 하기 때문에 따로 분류했다.
  }

let resultArr = [];

if (Array.isArray(obj)) {
  if (obj.length === 0) {
    // 빈 배열인지 확인
    return "[]";
  } else {
    for (let i = 0; i < obj.length; i++) {
      // 모든 요소에 재귀함수를 사용한다. 요소를 문자열로 바꾸기 위해 재귀 base로 향하게 한다.
      let result = stringifyJSON(obj[i]);
      resultArr.push(result);
    }
    return `[${resultArr}]`; // 배열자체를 문자열 형태로 반환한다.
  }
}

  //TODO: Object
  else {
    let recursiveArr = [];
    // 재귀함수를 실행시키고 값을 저장하기 위해 할당

    if (Object.keys(obj).length === 0) {  // 빈 객체 확인
      return "{}";
    } else {
      for (let key in obj) {
        // 모든 키와 값에 접근
        if (typeof obj[key] === "function" || obj[key] === undefined) {
          delete obj[key];
          stringifyJSON(obj);
          // 필요없는 부분을 제거하고 다시 실행(재귀)
        } else {
          // 모든 키와 값을 확인하고 재귀함수를 통해 문자열로 변환
          let vals = stringifyJSON(obj[key]);
          let keys = stringifyJSON(key);
          let resultObj = keys + ":" + vals;
          recursiveArr.push(resultObj);
          // 값을 저장한다.
        }
      }
    }
    return `{${recursiveArr}}`;
    // 객체 자체를 문자열로 반환한다.
  }
}

function stringifyJSON(obj) {
  //TODO: recursive base
  if (typeof obj === "number" || obj === null || typeof obj === "boolean") {
    return "" + obj;
  } else if (typeof obj === "string") {
    return `"${obj}"`;
  }

  //TODO: Array
  let resultArr = [];

  if (Array.isArray(obj)) {
    if (obj.length === 0) {
      return "[]";
    } else {
      for (let i = 0; i < obj.length; i++) {
        let result = stringifyJSON(obj[i]);
        resultArr.push(result);
      }
      return `[${resultArr}]`;
    }
  }

  //TODO: Object
  else {
    let recursiveArr = [];

    if (Object.keys(obj).length === 0) {
      return "{}";
    } else {
      for (let key in obj) {
        if (typeof obj[key] === "function" || obj[key] === undefined) {
          delete obj[key];
          stringifyJSON(obj);
        } else {
          let vals = stringifyJSON(obj[key]);
          let keys = stringifyJSON(key);
          let resultObj = keys + ":" + vals;
          recursiveArr.push(resultObj);
        }
      }
    }

    return `{${recursiveArr}}`;
  }
}

menu.forEach(el => {
    if (el.type === "group") {
      // 모든 1차원 객체가 type: "group" 으로 묶여있음
      let li = document.createElement("li");
      currentNode.append(li);

      ...

      let input = document.createElement("input");
      input.type = "checkbox";
      li.append(input);

      let span = document.createElement("span");
      span.textContent = el.name;
      li.append(span);

      let ul = document.createElement("ul");
      li.append(ul);

      createTreeView(el.children, ul);   // 자식 요소가 있으면모든 요소들을 재귀적으로 생성한다.
    }

// 더이상 자식 요소가 없을 경우
else {
      const li = document.createElement("li");
      li.textContent = el.name;
      currentNode.append(li);
    }

const root = document.getElementById("root");
function createTreeView(menu, currentNode) {
  // TODO: createTreeView 함수를 작성하세요.

  menu.forEach(el => {
    if (el.type === "group") {
      let li = document.createElement("li");
      currentNode.append(li);

      let input = document.createElement("input");
      input.type = "checkbox";
      li.append(input);

      let span = document.createElement("span");
      span.textContent = el.name;
      li.append(span);

      let ul = document.createElement("ul");
      li.append(ul);

      createTreeView(el.children, ul);
    } else {
      const li = document.createElement("li");
      li.textContent = el.name;
      currentNode.append(li);
    }
  });
}

createTreeView(menu, root);