[flutter] JSON 데이터 파싱해보기

🔗순서

0. json 데이터 준비
1. 데이터 모델 클래스 생성
2. json 데이터 파싱
3. json 데이터 로드

JSON 데이터 파싱 순서는 이렇게 정리해 보았다.

 

 

---

0. json 데이터 준비

0번은  json 데이터 준비라고 했는데 내 로컬주소의 json 데이터를 사용해도 되고

외부 url를 이용해도 된다.

 

나는 화면처럼 KBO리그 순위를 나타내기 위한 팀별 성적을 json 데이터로 가져와서 보여주도록 했다.

 

assets/data/data.json 경로로 json 데이터를 만들어주었다.

--> 이거를 사용하기 위해서는 pubspec.yaml에 

flutter:

  assets:

    - assets/data/

json 경로를 추가해줘야 한다.

[
    {
        "rank" : "1",
        "img" : "https://sports-phinf.pstatic.net/team/kbo/default/HT.png?type=f25_25",
        "team" : "KIA",
        "play" : "80",
        "win" : "45",
        "draw" : "2",
        "lose" : "33",
        "winner" : "0.577",
        "diff" : "0.0"
    },

    {
        "rank" : "2",
        "img" : "https://sports-phinf.pstatic.net/team/kbo/default/LG.png?type=f25_25",
        "team" : "LG",
        "play" : "83",
        "win" : "45",
        "draw" : "2",
        "lose" : "36",
        "winner" : "0.556",
        "diff" : "1.5"
    },
.....
    
]

이런 식으로 각 팀마다 데이터를 넣었다.

 

---

 

1. 데이터 모델 클래스 생성

 

나는 kboData.dart에 모델 클래스를 만들어줬다.

class KboData {
  String? rank;
  String? img;
  ...

  KboData({
    this.rank,
    this.img,
    ...
  });

  factory KboData.fromJson(Map<String, dynamic> json) => KboData(
      rank: json['rank'],
      img: json["img"],
     ...
}

나는 kboData라는 이름의 객체로 json 데이터를 사용하도록 하였다

여기서 주의할 점은 가져오는 실제 데이터와 사용할 데이터의 이름이 동일해야 한다.

(data.json에서 rank를 사용했으면 여기서도 rank를 사용해야 함)

 

---

2. json 데이터 파싱

 

나는 kbo.dart에 데이터 파싱 및 로드하여 화면에 보이도록 했다

Future<void> loadKboData() async {
    // 로컬 파일 'assets/data/data.json'에서 데이터 가져오기
    String jsonString = await rootBundle.loadString('assets/data/data.json');
    // JSON 문자열을 디코딩
    List<dynamic> jsonList = json.decode(jsonString);
    // KboData 이름의 객체로 변환
    List<KboData> dataList =
        jsonList.map((json) => KboData.fromJson(json)).toList();
    //화면에 보여주기
    setState(() {
      // kboDataList <- 여기에 데이터 할당
      kboDataList = dataList;
    });
  }
}

각각 주석을 달아둬서 이해하기 쉽도록 했다.

이 로직은 외우기보다는 어디다 적어놓고 사용할 때마다 이 방식으로 사용하라고 배웠다.

 

만약 로컬 데이터가 아닌 외부 데이터를 사용한다면 

Future<void> loadKboData() async {
  final url = 'https://데이터 주소';
  try {
    final response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      List<dynamic> jsonList = json.decode(response.body);
      List<KboData> dataList =
          jsonList.map((json) => KboData.fromJson(json)).toList();
      setState(() {
        kboDataList = dataList;
      });
    }

 로컬주소 대신 외부 주소를 넣으면 된다.

 

---

 3. json 데이터 로드

 

class _KboScreenState extends State<KboScreen> {
	//데이터를 받을 리스트 공간
  List<KboData> kboDataList = [];

  @override
  void initState() {
    super.initState();
    //실행될 때 데이터 로드 (즉 화면에 보여주기)
    loadKboData();
  }

아까 열심히 작성했던 로직인 loadKboData()를 initState() 안에 넣어주면 데이터를 로드하여 화면에 보여줄 수 있다.

initState() 이거는 State가 처음 생성될 때 호출되는 메서드로 데이터들을 화면에 띄어준다. 

 

for (var kboData in kboDataList) {
        showData.add(Row(
          children: [
            const SizedBox(width: 60),
            Row(
              children: [
                SizedBox(
                  //width: 30,
                  child: Text(kboData.rank ?? '', style: fontStyle),
                ),
                const SizedBox(width: 4),
                SizedBox(
                  child: Image.network(kboData.img ?? ''),
                ),
                const SizedBox(width: 4),
                SizedBox(
                  width: 25,
                  child: Text(kboData.team ?? '', style: fontStyle),
                ),
              ],
            ),
            const SizedBox(width: 53),
            Row(
              children: [
                Text(kboData.play ?? '', style: fontStyle),
                const SizedBox(width: 10),
                Text(kboData.win ?? '', style: fontStyle),
                const SizedBox(width: 10),
                Text(kboData.draw ?? '', style: fontStyle),
                const SizedBox(width: 8),
                Text(kboData.lose ?? '', style: fontStyle),
                const SizedBox(width: 12),
                Text(kboData.winner ?? '', style: fontStyle),
                const SizedBox(width: 12),
                Text(kboData.diff ?? '', style: fontStyle)
              ],
            ),
            const SizedBox(width: 3)
          ],
        ));
      }

내가 화면에 보여주기 위해 사용한 코드이다.

for문을 사용하여 kboDataList의 정보를 kboData에 할당하여

Text(kboData.rank ?? '') 이런식으로 사용이 가능하게 하였다

?? '' 이거는 null인 경우 빈 문자열을 사용하기 위해서이다.

 

---

정리