JSON Practice [1]

Json 을 이해했다면 응용을 해봅시다.

Full Code

import 'dart:core';
import 'dart:convert';
void main() {
  // jsonData 변수에 jsonString 데이터들을 넣어주겠습니다. 이때 var 키워드값은 'String' 타입으로 판단이 됩니다.
  var jsonData = """
  { "page": 1,
  "per_page": 3,
  "total": 12,
  "total_pages": 4,
  "author":{
    "first_name": "Ms R",
    "last_name":"Reddy"
  },
  "data": [
    {
      "id": 1,
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg",
      "images": [
        {
          "id" : 122,
          "imageName": "377cjsahdh388.jpeg"
        },
        {
          "id" : 152,
          "imageName": "1743fsahdh388.jpeg"
        }
      ]
},
    {
      "id": 2,
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg",
      "images": [
        {
          "id" : 122,
          "imageName": "377cjsahdh388.jpeg"
        },
        {
          "id" : 152,
          "imageName": "1743fsahdh388.jpeg"
        }
      ]
    },
    {
      "id": 3,
      "first_name": "Emma",
      "last_name": "Wong",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg",
      "images": [
        {
          "id" : 122,
          "imageName": "377cjsahdh388.jpeg"
        },
        {
          "id" : 152,
          "imageName": "1743fsahdh388.jpeg"
        }
      ]
    }
  ]
}
""";
  // 70. user 변수에 jsonDecode를 사용해서 String 형태를 => Map<String, dynamic> 형태로 변경하겠습니다.
  // 71. modelObject 변수에 Model클래스의 fromJson 값으로 인자값을 user 즉 Map 자료형으로 바뀐 값을 전달해주겠습니다.
  // 그리고 나서 fromJson 을 이용해서 저희가 '객체'를 생성해주겠습니다.
  Map<String, dynamic> user = jsonDecode(jsonData);
  var modelObject = Model.fromJson(user);
  // 78~81. print() 함수를 사용해서 각각의 요소에 접근을 하겠습니다.
  print(modelObject);
  print(modelObject.author);
  print(modelObject.author.first_name);
  print(modelObject.data[0].images[0].id);
  }
	// Model 클래스 내부에는 각각의 멤버변수 값들이 들어 있습니다
	// 98~99. author, data 는 List 형태의 데이터 값을 따로 클래스화 시켜서 접근하고 있습니다.
class Model {
  final int page;
  final int per_page;
  final int total;
  final int total_pages;
  Author author;
  List<Data> data;
  Model({required this.data, required this.author, required this.page, required this.per_page, required this.total, required this.total_pages});
  factory Model.fromJson(Map<String, dynamic> json) {
    // data 부분은 List 형태이기 때문에 Map 형태로 받게 되면 오류를 나타나게 됩니다
    // 그렇기 때문에 data 부분은
    // 107. 부분에서 List 값으로 만들어줍니다.
    // 110. data 부분을 받아오고 그 data 부분의 리스트 값을 한개씩 가져와서 이때는 Map 형태로 받아오다가 마지막에 .toList()를 사용해서
    // changeData 변수에 리스트[] 형태로 데이터를 저장시켜줍니다.
    // 119. changeData 변수 값을 List<Data> 타입인 data 멤버변수에 저장시켜주겠습니다.
    var dataList = json['data'] as List;
    List<Data> changeData = dataList.map<Data>((e)=>Data.fromJson(e)).toList();
    return Model(
      page: json['page'],
      per_page: json['per_page'],
      total: json['total'],
      total_pages: json['total_pages'],
      // author 부분은 nested 구조기 때문에 따로 Author 부분만 받아오는 클래스에서 fromJson을 사용해서 바로 불러와줍니다.
      author : Author.fromJson(json['author']),
      data: changeData,
    );
  }
}
class Author {
  final String first_name;
  final String last_name;
  Author({required this.first_name, required this.last_name});
  factory Author.fromJson(Map<String, dynamic> json) {
    return Author (
      first_name: json['first_name'],
      last_name: json['last_name'],
    );
  }
}
class Data {
  final int id;
  final String first_name;
  final String last_name;
  final String avatar;
  List<Images> images;
  Data({required this.id, required this.first_name, required this.avatar, required this.last_name, required this.images});
  factory Data.fromJson(Map<String, dynamic> json) {
    // imageList 변수에는 images 요소가 List 형태이기 때문에 List형태로 Data에서 했던 것 처럼 바꿔서 저장해줍니다.
    // 158. changeImageList 변수에다가 똑같이 imageList 리스트 형태로 된 Map 요소들을 하나씩 가지고 와서
    // chnageImageList에 List형태로 저장해줍니다.
    var imageList = json['images'] as List;
    List<Images> changeImageList = imageList.map<Images>((e)=> Images.fromJson(e)).toList();
    return Data(
      id: json['id'],
      first_name: json['first_name'],
      last_name: json['last_name'],
      avatar: json['avatar'],
      images: changeImageList,
    );
  }
}
class Images{
  final int id;
  final String imageName;
  Images({required this.id, required this.imageName});
  factory Images.fromJson(Map<String, dynamic> json) {
    return Images(
      id: json['id'],
      imageName: json['imageName'],
      );
  }
}

Result

JSON이 부족하다는 사실을 인지하고 배우기 시작한 순간 JSON 데이터 형태를 다루는게 능숙치 못했다. 사실 그랬기 때문에 삽질도 더 많이 해왔고, 그 순간 마다 데이터를 맘대로 응용하기에 쉽지가 않았었다. 이번 계기로 JSON 의 여러 형태를 다루는데 익숙해진 좋은 연습 예제인것 같다.