728x90
반응형
안녕하세요. 터미네입니다.
이번 포스팅은 json 배열화 하는 방법을 소개합니다.
소개하기 앞서 json의 데이터의 조건을 말씀드릴게요
json안에는 key값과 value가 있으며 n개가 있다고 가정하겠습니다.
즉 예시로 말씀드리자면,
{"key1":"value1", "key2":"value2" ... "keyn":"valuen"}
이렇게 되어있다고 가정하겠습니다.
위 json으로 된 것을 어떻게 배열화할 수 있는지
소스를 통해 소개알려드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let json = {
"원숭이" : "바나나",
"기린" : "나뭇잎",
"사슴" : "풀"
}
$(document).ready(function(){
let keyArray = Object.keys(json);//키값만 배열화
let jsonArray = new Array();//값만 배열화
console.log(keyArray);//키값 배열화 확인
for(let key in keyArray){
console.log(`${key}번째 키는 ${keyArray[key]}이고 값은 ${json[keyArray[key]]}`);
jsonArray.push(json[keyArray[key]]);
}
console.log(jsonArray);//값 배열화 확인
});
</script>
</head>
<body>
<div>json 테스트</div>
</body>
</html>
위 결과는 메모장으로 작성 후, 확장자를 html로 저장한 뒤에
크롬 브라우저로 열어서 확인이 가능합니다.
결과를 캡처해보면 아래 이미지처럼 나옵니다.
키값을 배열화 한 뒤에
for문을 돌려서 json데이터 안의 value들을
push를 통해 넣은 뒤 결과를 확인했습니다.
지금까지 json 데이터를 배열화하는 방법을 소개했습니다.
긴글 읽어주셔서 대단히 감사합니다.
728x90
반응형
'자바 웹 > front-end' 카테고리의 다른 글
| jQuery jqgrid post, get 방식 사용 (0) | 2023.02.02 |
|---|---|
| jQuery jqgrid 기본사용법 정리 local 방식 (0) | 2023.02.02 |
| 자바스크립트 백틱(backtick) 사용 (0) | 2023.02.01 |
| jQuery change함수 사용하기 (0) | 2023.01.18 |
| jQuery 라디오버튼 체크박스 사용하기 (0) | 2023.01.17 |