[ Javascript - JSON ] JSON 파일 데이터 출력 연습

 

202104.json

0.00MB

# json 파일 내용

[
  {
    "id": 0,
    "date": 20210401,
    "task": {
      "working_on": [
        {
          "id": 0,
          "content": "[JS] practice Promise()"
        },
        {
          "id": 1,
          "content": "[JS] practice fetch()"
        },
        {
          "id": 2,
          "content": "[JS] practice sleep()"
        }
      ],
      "done": [
        {
          "id": 0,
          "content": "블로그 정리"
        },
        {
          "id": 1,
          "content": "강의 듣기"
        },
        {
          "id": 2,
          "content": "잠자기"
        }
      ],
      "error": [
        {
          "id": 0,
          "content": "[JS] 내부함수 값 리턴이 안됨"
        },
        {
          "id": 1,
          "content": "[JS] fetch().then() 내부의 값을 받아올 수 없음"
        },
        {
          "id": 2,
          "content": "잠이안옴"
        }
      ],
      "memo": [
        {
          "id": 0,
          "content": "오늘 식단"
        },
        {
          "id": 1,
          "content": "오늘 배운거"
        },
        {
          "id": 2,
          "content": "수면 시간"
        }
      ],
      "todo": [
        {
          "id": 0,
          "content": "[lecture] 안드로이드 프로그래밍 듣기"
        },
        {
          "id": 1,
          "content": "[lecture] C프로그래밍 듣기"
        },
        {
          "id": 2,
          "content": "[sleed] 수면 시간 기록하기"
        }
      ]
    }
  },
  {
    "id": 1,
    "date": 20210402,
    "task": {
      "working_on": [
        {
          "id": 0,
          "content": "[JS] complete Promise()"
        },
        {
          "id": 1,
          "content": "[JS] complete fetch()"
        },
        {
          "id": 2,
          "content": "[JS] complete sleep()"
        }
      ],
      "done": [
        {
          "id": 0,
          "content": "블로그 정리2"
        },
        {
          "id": 1,
          "content": "강의 듣기2"
        },
        {
          "id": 2,
          "content": "잠자기2"
        }
      ],
      "error": [
        {
          "id": 0,
          "content": "[JS] 내부함수 값 리턴이 안됨2"
        },
        {
          "id": 1,
          "content": "[JS] fetch().then() 내부의 값을 받아올 수 없음2"
        },
        {
          "id": 2,
          "content": "잠이 안옴2"
        }
      ],
      "memo": [
        {
          "id": 0,
          "content": "오늘 식단2"
        },
        {
          "id": 1,
          "content": "오늘 배운거2"
        },
        {
          "id": 2,
          "content": "수면 시간2"
        }
      ],
      "todo": [
        {
          "id": 0,
          "content": "[lecture] 안드로이드 프로그래밍 듣기2"
        },
        {
          "id": 1,
          "content": "[lecture] C프로그래밍 듣기2"
        },
        {
          "id": 2,
          "content": "[sleed] 수면 시간 기록하기2"
        }
      ]
    }
  }
]

 

# json 파일 구조

최상위 [  ] : 전체 코드의 시작과 끝

{  } : 하위데이터로 한단계 내려감. 데이터 호출시 "." 으로 구분 ( data.content )

내부 [  ] : 데이터배열. index 번호로 호출 가능 ( data[0], data[4] )

 

# 연습

( json 전체 데이터를 담은 객체 = data )

          [ 코드 ]             		 	[결과]
		
data[0].task.memo[2].content 			// 수면시간
data[0].task.working_on[1].content		// [JS] practice fetch()
data[1].date 					// 20210402

 

# 참조 링크

fetch()로 JSON 파일 읽어오기

[ Javascript ] fetch로 JSON파일 읽어오기