Programing/Javascript, React

공공 데이터 중첩된 JSON #6

하얀배터리 2022. 6. 19. 07:43
728x90

 

HTML 

화살표가 있는 <div> </div> 사이에 값이 들어감 

// [1] : 중첩 데이터
window.onload = () => {
	const book = {
		"isbn": "123-456-789",
		"author": {
			"name": "홍길동",
			"email": "hong@hongkildong.com"
		},
		"editor": {
			"name": "이순신",
			"email": "lee@leesoonsin.com"
		},
		"title": "대한민국",
		"category": [
			"Non-Fiction", "IT", "Politics"			
			//   0           1        2  [  ]
		]
	}

	console.log( book["author"].name );		// 홍길동
	console.log( book["editor"].name );		// 이순신
	console.log( book["isbn"] );   //123-456-789
	console.log( book.isbn );      //123-456-789
	console.log( book["title"] );  // 대한민국
	console.log( book["category"] ); //['Non-Fiction', 'IT', 'Politics']
	console.log( book.category ); //['Non-Fiction', 'IT', 'Politics']


	// 개별 엑세스
	let val = "";
	 val = book.category[0];
	 document.getElementById("aaa").innerText = val;
};

 

document.getElementById("aaa").innerText =val;   //를 통해 넣어주었음 

 

 

 

category 값의 0번 -> Non-Fiction 들어온 모습  

 

 

 

 

 

for문 방법 

	// 반복문을 이용한 엑세스
	// for
	for( let i=0; i < book.category.length; i++ ) {
		val += book.category[i] + "<br>";

	}
	document.getElementById("aaa").innerHTML = val;
    
    
      //백틱사용
       for( let i=0; i < book.category.length; i++ ) {
		val += `${ book["category"][i] } <br>`;  //백틱 사용 

	}
	document.getElementById("aaa").innerHTML = val;

 

 

for .. in

	//for .. in
	for( let i in book.category ) {
		val += book.category[i] + "<br>";
	}
	document.getElementById("aaa").innerHTML = val;

 

 

 

 

 

728x90