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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
#1
{
  "data": {
    "users": [
      {
        "name": "John",
        "age": 28,
        "address": {
          "street": "123 Main St",
          "city": "New York",
          "state": "NY",
          "zip": "10001"
        }
      },
      {
        "name": "Jane",
        "age": 32,
        "address": {
          "street": "456 Oak St",
          "city": "San Francisco",
          "state": "CA",
          "zip": "94102"
        }
      }
    ]
  }
}

#2
function renderTable(data) {
  const headers = ['First Level', 'Second Level', 'Third Level', 'Value'];
  const rows = [];

  const traverse = (obj, path) => {
    if (typeof obj === 'object' && obj !== null) {
      Object.keys(obj).forEach((key) => {
        const newPath = path.concat(key);
        traverse(obj[key], newPath);
      });
    } else {
      const newRow = path.concat(obj);
      rows.push(newRow);
    }
  };

  traverse(data, []);

  return (
    <table>
      <thead>
        <tr>
          {headers.map((header) => (
            <th key={header}>{header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row, i) => (
          <tr key={i}>
            {row.map((cell, j) => (
              <td key={j}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

const data = {...}; // 위의 예시 Json 데이터
const table = renderTable(data);