아래 코드를 ajaxtest.json 파일에 저장한다.

참고로 확장자명이 json이 아닌 js로 해도 무방하다.

 

{
    "aaa": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "2ban": "정수향"
        }
    ],


    "bbb": [
        {
            "bbc1": "이선태",
            "bbc2": "이한아"
        }
    ],
    
    
    
    "아하": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "2ban": "정수향"
        }
    ],



    "1아하": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "하타루": "정수향",
            "1하타루": "1정수향"
        }
    ]
}

 

 

JSON의 형태는 우선 중괄호 {}를 써주고 그안에 카테고리 명을 쓴 뒤 :를 써주고 중괄호를 다시 써서 그안에 키, 밸류값을 넣어준다.

 

아래형태 처럼

{
    "1하하": [
        {
            "aab1": "이정수",
            "aab2": "이한수",
            "2ban": "정수향"
        }
    ]
}

 

그 다음, 아래 코드를 ajaxtest.html 에 넣어준다.

<html>

<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    <script>
        $(function() {
            
 
            $.ajax({ type: 'get' , 
                    url: 'ajaxtest.json' , 
                    dataType : 'json' , 
                    success: function(data) {
                console.log("접속 성공");
                 
                    } 
                   });
       
        });

    </script>
</body>


</html>

 

위 코드를 실했을 때, 제대로  json 파일을 가져온다면 

아래와 같이 뜬다.

 

 

이제 json의 파일을 가져오는 예제를 해보겠다.

 

 

1. 최상위의 키들을 가져오고 싶을 때 (예:   [aaa, bbb, 아하, 1아하])

 

   console.log("접속 성공"); 아래에 아래와 같이 써준다.

 console.log(Object.keys(data));

 

 

성공한다면 아래와 같이 나온다.

여기서 aaa만 선택하고 싶을 경우, 첫번째 배열에 있으므로 배열을 선택해준다.

  console.log(Object.keys(data)[0]);

 

그러면 결과는 aa가 나온다. 

2. "1아하" 같이 최상위 키의 밸류들을 가져오고 싶을 때 

 

아래처럼 입력해준다.

 

console.log(data["1아하"]);

하지만

배열형태로 뜬다.

크롬 console에서는 클릭하면 보이지만, undefined 상태이다. 왜냐하면 1아하 아래는 배열인데 정확한 배열명을 입력해주지 않았기 때문이다.

 

따라서 첫번째 배열을 [0]으로 지정해주면 정상적으로 뜬다.

console.log(data["1아하"][0]);

 

 

여기서 맨마지막 1정수향이 나오도록 해보자

 

  console.log(data["1아하"][0].1하타루);

 

원칙적으로 위코드를 넣어주면 되지만 에러가 뜰것이다.

왜냐면 첫번째 문자가 숫자라서 그렇다.

 

첫번째 문자가 한글이어도 상관없지만 숫자면 제대로 읽어오지 않는다.

 

그럼 1을 빼고 그냥 "하타루"를 입력해본다.

 

console.log(data["1아하"][0].하타루);

 

 

 

정상적으로 값을 반환해줌을 알 수 있다.

 

 

 

 

 

 

 

 

제이쿼리에서는 쉽게 키프레스를 할 수 있지만 앵귤러js에서는 약간 복잡하다.

 

Angularjs로 키 값을 감지하는 방법은 ng-keypress 또는 directive로 ng-enter 같은 것을 만드는 것이 있다.

 

1. ng-keypress 이용

<!doctype html>
<html>

<head>
    <title>앵귤러 연습</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>

</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">
        <input type="password" ng-model="userpw" ng-keypress="onKeyPress($event)">
        <h5>{{onKeyPressResult}}</h5>
        <h5>눌른 키 코드: {{pressedKey}}</h5>
    </div>

    <script>
        //angulare 영역

        var app = angular.module("myApp", []);

        app.controller('myCtrl', function($scope, $http, $rootScope, $location) {
            
            $scope.onKeyPressResult = "";
            
            //눌린 키값을 가져온다.
            var getKeyboardEventResult = function (keyEvent){
                return(window.event ? keyEvent.keyCode : keyEvent.which);
            }
            
            //키 클릭 메소드
            $scope.onKeyPress = function($event){
                console.log("키눌림");
                $scope.pressedKey = getKeyboardEventResult($event);
                
                
                if(getKeyboardEventResult($event) == 13){
                    $scope.onKeyPressResult = "Enter key pressed";
                    
                }else{
                    $scope.onKeyPressResult = "not pressed enter key";
                }
                
            }
    
        });
   
    </script>

</body>

</html>

위와 같은 html 파일을 생성하고 인풋에 엔터가 아닌 자판을 입력하면 이렇게 나오고

엔터가 아닌 키를 입력시

 

엔터를 누르면 아래와 같이나온다.

엔터는 가운데 엔터키나 오른쪽 엔터키나 같이 13코드로 적용된다.

 

 

 

 

 

+ Recent posts

티스토리툴바