JavaScript – THE NEWTH

How to pretty print JSON Object

JSON Object를 화면에 바로 보여주어야 할 때, 그냥 바로 출력을 하면 한줄로 길게 표현이 되기 때문에, 가독성이 떨어진다. 하지만 다음과 같이 하면 들여쓰기를 하여 JSON Object를 보기 좋게 프린트 할 수 있다.

1. Html

<pre><code class=JsonResult></code></pre>

2. Javascript

var jsonObject = [{name: "Gil-Dong", Age: 20, Birthday: new Date("2001-01-01")},{name: "Young-Hee", Age: 25, Birthday: null}];

$('.JsonResult').html(JSON.stringify(jsonObject, null, 3));

3.Result

[
   {
      "name": "Gil-Dong",
      "Age": 20,
      "Birthday": "2001-01-01T00:00:00.000Z"
   },
   {
      "name": "Young-Hee",
      "Age": 25,
      "Birthday": null
   }
]

How to convert the following table to JSON Object

다음과 같이 하면 html table에 있는 리스트 형태의 데이터들을 JSON Object 형태로 만들어 사용할 수 있다.

var List = [];
var headers = $("table th");

$('table .tableRows').each(function (i, row) {
     List[i] = {};
     $(row).find('td').each(function (j, cell) {
         List[i][$(headers[j]).text()] = $(cell).find('input').val();
     });
 });

-유의사항-
이 코드는 최적화하여 만들어진 것은 아니고 단순히 Jquery 스크립트로만 위문제를 해결한 것이기 때문에, 더 좋은 최적화된 오픈 소스 혹은 라이브러리가 있다면 그것을 사용하는 것을 권장한다.