알아야할 사전 지식.

1.Json 이란 무엇인가?

 JavaScript Object Notation의 약자로써, 자바스크립트를 위한 것이며, 객체 형식으로 자료를 표현하는 것이다. 그냥 [제이:슨] 이라고 읽으면 된다.

2.이것은 새로운 언어인가?

 아니다 단순히 데이터 포맷일 뿐이다. XML,INI 파일 등과 같은 비슷한 것이라고 생각하면 된다.



Scenario: Ajax를 이용해서 여러 데이터 파일을 파싱하고자함. 그중 첫번째는 json 파일


Solutions : (아래)


<Ajax_getjSON.html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JSON 이용하기</title>
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8.     $(function() {
  9. //      $.ajax({
  10. //          url: "items.json",
  11. //          contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  12. //              dataType: "json",    
  13. //          success: function(result) {
  14. //              $.each(result, function(i, val) {
  15. //                  console.log(val['id']+':'+val['name']);
  16. //              })
  17. //          },
  18. //          error: function(jqXHR, textStatus, errorThrown) {
  19. //              alert("Error: " + textStatus + " errorThrown: " + errorThrown);
  20. //          }
  21. //      });
  22. //ajax 이용
  23.  
  24.         $.getJSON("items.json", function(result) {
  25.             $('#treeData').append("<tr><td>price</td>"+"<td>name</td>"+"<td>price</td>"+"<td>description</td></tr>");
  26.             $.each(result, function(i, val) { //result는 each 문에 val과 매칭시켜주기위함이고 , 인자 i와 val은 each함수의 시그니쳐다.
  27.                 console.log(typeof(i));
  28.                 console.log(val['id']+val['name']+val['price']+val['description']);
  29.                 $('#treeData').append("<tr><td>"+val['id']+"</td>"+"<td>"+val['name']+"</td>"+"<td>"+val['price']+"</td>"+"<td>"+val['description']+"</td></tr>");
  30.             });
  31.         });
  32. });  
  33. </script>
  34. <style>
  35. td, th {
  36.     border: 1px solid gray;
  37. }
  38. </style>
  39.  
  40. </head>
  41. <body>
  42.     <table id="treeData">
  43.     </table>
  44. </body>
  45. </html>


<items.json>

  1. [
  2.   {
  3.     "id": "1",
  4.     "name": "레몬",
  5.     "price": " 3000",
  6.     "description": "레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다."
  7.   },
  8.   {
  9.     "id": "2",
  10.     "name": "키위",
  11.     "price": " 2000",
  12.     "description": "비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다."
  13.   },
  14.   {
  15.     "id": "3",
  16.     "name": "블루베리",
  17.     "price": " 5000",
  18.     "description": "블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다."
  19.   },
  20.   {
  21.     "id": "4",
  22.     "name": "체리",
  23.     "price": " 5000",
  24.     "description": "체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다."
  25.   },
  26.   {
  27.     "id": "5",
  28.     "name": "메론",
  29.     "price": " 5000",
  30.     "description": "메론에는 비타민A와 칼륨이 많이 포함되어 있다."
  31.   },
  32.   {
  33.     "id": "6",
  34.     "name": "수박",
  35.     "price": "15000",
  36.     "description": "수분이 풍부한 과일이다."
  37.   }
  38. ]


어려웠던점 

1. 일단 Json 데이터의 {}가 한개일때는 파싱하기가 쉬운데, 중괄호가 여러개가 되니 하나의 오브젝트가 되어 파싱하기가 힘들어졌다. 

찾아보니  {}가 여러개인 형태를 json array라고 부른다고 하더라 (Json 데이터가 배열형태를 이룸), json array라는 키워드를 알고 구글링하니 찾기 쉬워짐

2.json 파일을 불러오다보니 한글파일이 자꾸 깨짐, 일단 결론부터 말하자면 .getJSON 으로는 utf-8 을 지정할 수 없음. .aJax를 쓰면 contentType key로 

utf-8 지정가능



+Tip 시그니쳐란 무엇인가?

나는 원래 C,C++ 부터 프로그래밍을 시작해서, 델리게이터를 만들때 시그너쳐(signature) 라는 용어를 많이썻었는데,

시그너쳐란 말그대로 어떤 함수의 선언문에  명시된 매개변수 리스트와 반환타입이다.

쉽게말해 시그니처는 함수의 형태이다.


[Signature Ex]

int getMoney(Person kim); 

다음 함수 에서 시그니쳐는 int(Person) 인것이다.


저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[AJAX, JSON] Servlet 에서 Ajax를 써서 동적으로 리플 불러오기  (0) 2017.03.24
[Jquery] 동적으로 Iframe 간 반응하기, 로그인 연습  (0) 2017.03.07
[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기  (0) 2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기  (0) 2017.02.14
[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14

+ Recent posts

티스토리툴바