본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[기초] Javascript

Javascript json array loop, for (자바스크립트 json 배열 반복문) Object for Object loop

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2020. 1. 21.

* 일반 배열에서의 반복문

 

1. for in

var array  = [
    {text:'abcd',number:1234},
    {text:'efg',number:5678}
];

for(idx in array){
    console.log(array[idx]);
};

동작 결과

 

2. 단순한 for

var array  = [
    {text:'abcd',number:1234},
    {text:'efg',number:5678}
];

for(i=0;i < array.length;i++){
    console.log(array[i]);
};

동작 결과

 

3. forEach

var array  = [
    {text:'abcd',number:1234},
    {text:'efg',number:5678}
];

array.forEach(function(data, idx){
    console.log(data);
});

동작 결과

 

 

─────────────────────────────────────────────────

 

* Object형태(json)의 객체를 반복문으로 동작하기

 

1. Object를 활용한 방법

var json = {text:'abcd', number:1234, desc:'efg'};
Object.keys(json).forEach(function(k){
    console.log('키값 : '+k + ', 데이터값 : ' + json[k]);
});

동작 결과

 

2. for in 을 활용한 방법

var json = {text:'abcd', number:1234, desc:'efg'};
for(var key in json){
  console.log('키 : '+key + ', 값 : ' + json[key])
}

동작 결과

 

3. Jquery를 활용한 방법

var json = {text:'abcd', number:1234, desc:'efg'};
$.each(json,function(key, value){
    console.log('키 : '+key + ', 값 :' + value);
});

동작 결과

 

반응형
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글