Chapter [ StringifyJSON ]

JSON이란?
JavaScript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷이다.

1. JSON에서 중요한 메소드

1. JSON.stringify

   • Object type을 JSON으로 변환
     (인자로 전달된 자바스크립트의 데이터를 문자열로 변환)

2. JSON.parse

   • JSON을 Object type으로 변환
     (인자로 전달된 문자열을 자바스크립트의 데이터로 변환)

2. JSON의 기본 규칙

1. JSON vs 자바스크립트의 객체

2. JSON은 키와 값 사이, 그리고 키-값 쌍 사이에는 공백이 있어서는 안된다.

3. 재귀를 이용해 메소드 JSON.stringify 함수의 형태로 구현하기

function stringifyJSON(obj){
  if(obj === null){
    return 'null'
  }
  if(typeof obj === 'number' || typeof obj === 'boolean'){
    return String(obj)
  }
  if(typeof obj === 'string'){
    return `"${obj}"`
  }
  if(Array.isArray(obj)){
    const newArray = [];
    for(key of obj){
      newArray.push(stringifyJSON(key))
    }
    return `[${newArray}]`
  }
  if(typeof obj === 'object'){
    let str = ''
    for(key in obj){
      if(typeof obj[key] === 'function' || obj[key] === undefined) {
        return '{}'
      }else {
        str += `${stringifyJSON(key)}:${stringifyJSON(obj[key])},`
      }
    }
    return `{${str.slice(0, -1)}}`
  }

4. Tree UI

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  
  for(key of menu){
    const list = document.createElement('li')
    // root.append(list)
    if(key.children){
      const check = document.createElement('input')
      list.append(check)
      check.setAttribute('type', 'checkbox')
      //check.type = 'checkbox'
      
      const span = document.createElement('span')
      list.append(span)
      span.textContent = key.name
      
      const ul = document.createElement('ul')
      list.append(ul)
      currentNode.append(list)
      
      createTreeView(key.children, ul);   
    }else{
      list.textContent = key.name;
      currentNode.append(list)
    }
    
  }
  // TODO: createTreeView 함수를 작성하세요.
}

createTreeView(menu, root);