자바스크립트 - Json 관련 질문!

안녕하세요! Json 데이터를 테이블로 보여주는 것과 관련된 라이브러리 중에는 react-json-table과 react-json-view이 있습니다. 하지만, 이러한 라이브러리는 보통 단순한 형태의 Json 데이터를 테이블로 변환하기 위해 만들어졌으며, 복잡한 구조의 Json 데이터를 테이블로 변환하기는 어려울 수 있습니다. 따라서, 직접 구현하는 것이 가장 좋은 방법일 수 있습니다. 예를 들어, Javascript의 map() 함수를 이용하여 Json 데이터를 순회하면서 원하는 형태로 테이블을 구성하는 코드를 작성할 수 있습니다. 이때, Json 데이터의 구조가 복잡하다면 재귀적인 방법을 사용하여 데이터를 순회하면서 테이블을 구성하는 것이 좋습니다. 1. 예를 들어, 다음과 같은 형태의 Json 데이터가 있다고 가정해보겠습니다. 2. 이 경우, 다음과 같이 코드를 작성할 수 있습니다.

1#1
2{
3  "data": {
4    "users": [
5      {
6        "name": "John",
7        "age": 28,
8        "address": {
9          "street": "123 Main St",
10          "city": "New York",
11          "state": "NY",
12          "zip": "10001"
13        }
14      },
15      {
16        "name": "Jane",
17        "age": 32,
18        "address": {
19          "street": "456 Oak St",
20          "city": "San Francisco",
21          "state": "CA",
22          "zip": "94102"
23        }
24      }
25    ]
26  }
27}
28
29#2
30function renderTable(data) {
31  const headers = ['First Level', 'Second Level', 'Third Level', 'Value'];
32  const rows = [];
33
34  const traverse = (obj, path) => {
35    if (typeof obj === 'object' && obj !== null) {
36      Object.keys(obj).forEach((key) => {
37        const newPath = path.concat(key);
38        traverse(obj[key], newPath);
39      });
40    } else {
41      const newRow = path.concat(obj);
42      rows.push(newRow);
43    }
44  };
45
46  traverse(data, []);
47
48  return (
49    <table>
50      <thead>
51        <tr>
52          {headers.map((header) => (
53            <th key={header}>{header}</th>
54          ))}
55        </tr>
56      </thead>
57      <tbody>
58        {rows.map((row, i) => (
59          <tr key={i}>
60            {row.map((cell, j) => (
61              <td key={j}>{cell}</td>
62            ))}
63          </tr>
64        ))}
65      </tbody>
66    </table>
67  );
68}
69
70const data = {...}; // 위의 예시 Json 데이터
71const table = renderTable(data);