투케이2K

511. (javaScript) [간단 소스] 자바스크립트 Object.entries 사용해 json 에 저장 된 key , value 값 동시 출력 수행 본문

JavaScript

511. (javaScript) [간단 소스] 자바스크립트 Object.entries 사용해 json 에 저장 된 key , value 값 동시 출력 수행

투케이2K 2026. 3. 16. 19:06
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / JSON / Object.entries / Object.keys


- 사전) 👉 Object.keys 간력 설명 : 

  >> Object.keys()는 객체의 '열거 가능한(enumerable)' 속성 이름(key)들을 배열로 반환하는 함수입니다.

    - obj : key 목록을 얻고 싶은 객체
    - 반환값 : 문자열 배열(String[])

  >> 기본 문법 : Object.keys(obj)


- 사전) 👉 Object.entries 간력 설명 : 

  >> Object.entries()는 자바스크립트에서 객체를 다룰 때 key와 value를 동시에 순회하거나 가공할 때 가장 많이 쓰는 내장 메서드입니다.

    - obj : key 목록을 얻고 싶은 객체
    - 반환값 : 문자열 배열(String[])

  >> Object.entries(obj) 는 객체의 “자신의(enumerable) 속성” 을 [key, value] 쌍의 배열로 반환합니다.

  >> 기본 문법 : Object.entries(obj)

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">
        
        window.onload = async function() {
          console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

          try {

            // --------------------------------------------
            // [샘플 json 데이터 생성]
            // --------------------------------------------
            const json = {
              name: 'twok',
              age: 19,
              date: new Date('2026-03-13T15:12:30')
            };


            // --------------------------------------------
            // [Object.keys() json 데이터 key 배열 확인]
            // --------------------------------------------
            // ✅ [Object.keys() 를 사용해 json 데이터에 최소 1개 이상 key 가 포함 된 경우 체크]
            // --------------------------------------------
            if (json !== null && json !== undefined && Object.keys(json).length > 0){


              // --------------------------------------------
              // ✅ [Object.entries() 사용해 json 데이터 key , value 동시 확인 수행]
              // --------------------------------------------
              for (const [key, value] of Object.entries(json)) {
                
                console.log(`json : key = ${key} / value = ${value}`);

                // --------------------------------------------
                // 출력 로그 예시 
                // --------------------------------------------
                // json : key = name / value = twok
                // --------------------------------------------
                // json : key = age / value = 19
                // --------------------------------------------
                // json : key = date / value = Fri Mar 13 2026 15:12:30 GMT+0900 (한국 표준시)
                // --------------------------------------------

              }

            }
            else {
              console.error('json type error');
            }
            
          }
          catch (exception) {
            console.error("[window onload] : [Exception] : 예외 상황 발생 : ", exception);

          }

        };

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[간단 소스] 자바스크립트 Object.keys 사용해 json 에 저장 된 key 키 포함 및 개수 확인 및 for 문 key , value 출력

https://kkh0977.tistory.com/8691

https://blog.naver.com/kkh0977/224214219987


[자바스크립트 json string 문자열 데이터 JSON.parse 사용해 model 객체에 매핑 수행]

https://kkh0977.tistory.com/5055

https://blog.naver.com/kkh0977/223304887680?trackingCode=blog_bloghome_searchlist


[json 특정 key 포함 확인 및 데이터 출력 실시 - hasOwnProperty , for in]

https://kkh0977.tistory.com/1092

https://blog.naver.com/kkh0977/222461468315?trackingCode=blog_bloghome_searchlist


[JsonArray 에 담긴 JsonObject 객체 파싱해 특정 idx (순서) 로 정렬 실시]

https://kkh0977.tistory.com/876

https://blog.naver.com/kkh0977/222399966146?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

513. (javaScript) [간단 소스] 자바스크립트 new Map 맵 객체 생성 및 기본 사용 방법 정리 - set , get , delete , has , clear  (0) 2026.03.18
512. (javaScript) [간단 소스] 자바스크립트 Object.fromEntries 사용해 json 객체 특정 value 값 기준 필터링 및 value 값 기준 정렬 수행  (0) 2026.03.17
510. (javaScript) [간단 소스] 자바스크립트 커스텀 json key 정렬 함수 생성 및 string , number , date 타입 asc , desc 정렬 수행  (0) 2026.03.13
509. (javaScript) [간단 소스] 자바스크립트 Object.keys 사용해 json 에 저장 된 key 키 포함 및 개수 확인 및 for 문 key , value 출력  (0) 2026.03.12
508. (javaScript) [기능 보완] 자바스크립트 nextToken 사용해 AWS HLS 비디오 스트림 리스트 목록 확인 - listStreams  (0) 2026.03.11
'JavaScript' Related Articles more
Comments