JSON데이터 파싱하기

json데이터를 가져와 원하는 데이터를 얻을려면 가공을 해주어야한다

그럴려면 먼저 데이터 타입이 무엇인지가 중요하다 

 

1.json형태의 주소와 먼저 연결을 시켜준다. 연결에 성공을 햇으면 statusCode에서 200코드를 던저준다. 200코드이면 연결이 잘 되었다는 것이다.

응답한 response의 데이터 타입은 Response이다. 이 Response를 Map구조로 변환 시켜주어야한다.

 

Map구조로 바꿔 주기위해서는 convert를사용해주어야 한다. 먼저 사용하기 위해서는 import를 해주고나서 뒤에 

as를 써주고 난뒤 convert라고 이름으 지어준다. 변수명 같은거라고 생각하자 사용하는 이유는 비슷한 이름을 가지는 패키지가 있으면 저 패키지를 우선권을 주는 것이다.

그리고나서 응답받은 데이터의 body를 Map형태로 바꿔준다.

그럼 jsonRes는 데이터 타입이 Map구조 즉 key, value값의 형태로 바뀐걸 알 수 있다.

 

 

Map전체의 키값은 3개를 가지고 있다.

만약 원하는데이터가 email이다 그럼 data의 키값을 접근을해 value값을 얻어온다 그런데 여기서 value값은 List형태이다.

이 리스트 형태안으로 들어가면 또 Map구조로 되어있다. 그럼 몇번을 과정을 거쳐서 값을 얻어와야한다.

 

 

 

 

먼저 data에 접근을 해보자

 

1. Map형태의 jsonRes에서 forEach문을 돌려준다.

2. 만약 key값이 data이면 data의 value값을 list변수에 담아준다. (data의 value값은 list형태이다.)

3. list에는 data의 value값이 담겨져 있다. 그런데 value안에는 또 다시 Map구조로 되어 있다. 현재 e : data의 value값들이 담겨져 있다. 

4. user키값의 value값은 또 Map 구조로 되어 있다. 그 value값을 Map타입으로 map1에 담아준다.

5. map1의 키값중에 eamil이라는 키값을 찾아 value값을 뽑아주면 된다.

 

import 'package:basic_http_flutter_2/utils/constant.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' as convert;

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);


  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  void initState() {
    fetchList();
  }
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  fetchList() async {
    var uri = Uri.parse("http://lalacoding.site/init/post"); // 해당 주소와 연결을해 데이터를 받아온다.
    http.Response response = await http.get(uri);
    if(response.statusCode == 200) {
    print("응답성공 : ${response.statusCode}"); // 통신 연결을 요청후 연결이 잘 됬는지 상태코드를 응답 받음
    }
    print(response.runtimeType); // 응답 통신의 데이터값의 자료형(데이터 타입) 출력

    // 응답 받은 response의 body 데이터를 Map형태로 바꿔 jsonRes에 담아준다.
    var jsonRes = convert.jsonDecode(response.body) as Map<String, dynamic>;
    print("jsonRes 데이터 타입 ${jsonRes.runtimeType}"); // jsonRes의 데이터 타입은 Map인걸 알 수 있다.

    jsonRes.forEach((key, value) {
      print("키 : $key");
    });


    jsonRes.forEach((key, value) { // Map형태의 jsonRes에서 forEach문을 돌려준다.
      if(key == "data") { // 만약 key 값이 data이면
        List list = jsonRes['$key']; // data의 value값을 list변수에  담아준다.(data의 value값은 list형태이기때문)
        list.forEach((e) { // list에는 data의 value이 담겨져 있다. 그런데 value안에는 또 다시 Map구조로 되어 있다.  현재 e : data의 value값들이 담겨져 있다.
          Map<String,dynamic> map1 = e['user']; // user키값의 value값은 또 Map 구조로 되어있다. 그 value값을 Map타입으로 map1에 담아 준다.
          print("이메일 ${map1['email']}"); // map1의 키값중에 email이라는 키값을 찾아 value값을 뽑아주면된다.
        });
      }
    });
  }
}