2021년 1월 4일

JSON

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

"가 무조건 출력되게 되어있다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

function stringifyJSON(obj) {
  if(typeof(obj) ==="number" || typeof (obj) ==="boolean" || obj ===null) {
    return String(obj);
  }
  if(typeof obj === "string"  ) { ////// 'foo' --> '"foo"'
    return `"${obj}"`
  }
  if(Array.isArray(obj)) { ///// 배열일 경우;;;
    let newArr =[];
    if(obj.length ===0) {
      return '[]';
    }
    else{
      for(let i=0; i<obj.length; i++) {
        newArr.push(stringifyJSON(obj[i]));
      }
    }
    return `[${newArr}]`
  }
  if(typeof(obj) === 'object') {

    let newStr ='';
    if(Object.keys(obj).length ===0) {
      return '{}';
    }
    
    else {
      for(let property in obj) {
        if(typeof(obj[property]) ==='function' || typeof(obj[property]) ===undefined) {
          return '{}';
        }
        let key = stringifyJSON(property);
        let value = stringifyJSON(obj[property]);
        newStr += `${key}:${value}`;
        newStr += `,`
      } 
      newStr= newStr.slice(0,newStr.length-1);
      return  `{${newStr}}`;
    }
  }
};

TREE UI

const root = document.getElementById('root');

function createTreeView(menu, currentNode) { //// obejct랑 현재 있는 node

  menu.forEach(function(element) {

    const liTag = document.createElement('li');
    
    const checkboxInputTag = document.createElement('input');
    checkboxInputTag.type = 'checkbox'
    
    const menuSpanTag = document.createElement('span');
    menuSpanTag.textContent = element.name;

    const nextUlTag =document.createElement('ul'); 

    liTag.append(checkboxInputTag, menuSpanTag,nextUlTag)

    currentNode.append(liTag);  
    
    if(element.children) { /// 자식 node가 있을때
      createTreeView(element.children, nextUlTag);
    }
    else{ /// 자식 node 가 없을 경우.
      liTag.textContent=element.name;
      currentNode.append(liTag);
    }
  });
}

createTreeView(menu, root);

이렇게 바뀌었다 좀 더 쉽게 바뀐듯하다..

반복이 되는 경우와 반복이 되지 않는 경우를 나눈다.