[Flutter] Json Data를 불러오자 1편

 

 

개요 : HTTP통신을 통해 데이터를 받아오기 위해서 RsetAPI를 활용한다. RestAPI는 목적이 어떤 페이지를 여는 것이 아닌, 데이터 전송에 대한 목적이다. 클라이언트 쪽으로 데이터를 주고자 하는데 이것은 JSON방식으로 데이터를 주기위한 목적이다.

1. JSON이란 무엇일까? 데이터를 저장 및 전송할 때 데이터 형식으로 자주사용된다. (JavaScrpit Object Notation)

{
    "users": [
        {
            "name": "lee",
            "age": 32
        },
        {
            "name": "bebe",
            "age": 26
        }
    ]
}

과 같이 사용욀 수 있다. 정확한 RestAPI의 기술을 보고싶다면 https://www.redhat.com/en/topics/api/what-is-a-rest-api 참고하면 좋을 것 같다.

 

상황 : Flutter에서 RestAPI를 통해 Json data를 받고싶어요!

 

API를 받기 위해 https://jsonplaceholder.typicode.com/ 의 사이트에서 참고할 것이다.

 

일단 HTTP통신을 하기 위한 코드먼저 작성해야할 것이다.

 

여기서 async는 비동기적 데이터를 받아오기 위함이다. async에 관한 것들은 https://velog.io/@jintak0401/FlutterDart-%EC%97%90%EC%84%9C%EC%9D%98-Future-asyncawait 참고하시면 좋습니다!

 

이렇게 FutureBuilder를 통해서 데이터를받아오는 식으로 코드를 작성.

앱 화면또한 정상적으로 출력하는 것을 알 수 있다. 

 

그런데 우리는 json의 값이 아닌 변수에 값을 저장하여 사용하고 싶을 수 있다. 그렇기 위해서는 json 구조에 맞는 class를 선언하여 사용하면 좋을 것 같다. 그렇기 위해서는 comment에 대해서 알아보자.

  {
    "postId": 1,
    "id": 3,
    "name": "odio adipisci rerum aut animi",
    "email": "Nikita@garfield.biz",
    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
  },

위와같은 Comment클래스가 있다고 가정하면, Comment 여려개를 통신받을 것이다. 

Comment의 기본 구조이다. 우리는 이와 같은 값을 List<Comment> Comments의 구조로 담을 것이다.

 

일단 받은 데이터 먼저 확인해보자

 

프린트를 통해 확인해보니 String Data이다. 이것을 적절하게 파싱해서 쓰면 될 것이다. 그런데 이미 flutter에서 Json을 해석해주는 기능을 제공한다.

 

 

jsondecode를 활용할 경우 다음과 같은 List<dynamic>이 나온다.

다시 한번

 

 

프린트로 찍게 된다면 Hashamap구조의 형태가 나온다. 우리는 이 값을 통해서 아까 만들어놓은 Model에 값을 저장하고 싶을 것이다.

다음을 실행시켜 보면

우리는 json값을 String 값으로 파싱을 해야 하는데, 그렇게 하기 위해서는 model에 코드를 추가하여야 한다.

엥 코드를 왜 추가해?라는 질문? https://www.oowgnoj.dev/post/flutter-json해결하면 된다.

정확한 설명을 하고 싶은데 그건 능력이 딸려서 힘들 것 같습니다.

Comment class에 다음과 같은 코드를 추가하면 됨.

 

json으로 받은 0번째 name 값이 정상적으로 출력된다. 우리는 이렇게 ['value']로 접근하기 싫다. 번거롭기도 하고 Model을 통해서 접근하면 좋을 것이라 예상된다.그렇게 해서 for 문으로 처리를 해주면 된다.

이렇게 해서 처리하면 굿!

 

1편 끝

 

참고 : https://m.blog.naver.com/sanghan1990/222064772952

https://www.oowgnoj.dev/post/flutter-json 

https://bebesoft.tistory.com/49

 

 

class Comment {
  int? postid;
  int? id;
  String? name;
  String? email;
  String? body;

  Comment({this.postid, this.id, this.body, this.name, this.email});

  Comment.fromJson(Map<String, dynamic> json) {
    postid = json['postId'];
    id = json['id'];
    name = json['name'];
    email = json['email'];
    body = json['body'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['postId'] = this.postid;
    data['id'] = this.id;
    data['name'] = this.name;
    data['email'] = this.email;
    data['body'] = this.body;
    return data;
  }
}

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:testjson/Model.dart';

Future<String> getData() async{
  String url = "https://jsonplaceholder.typicode.com/comments";
  http.Response response = await http.get(Uri.parse(url));
  return response.body;
}

class TestRestAPI extends StatefulWidget {
  const TestRestAPI({Key? key}) : super(key: key);
  @override
  State<TestRestAPI> createState() => _TestRestAPIState();
}

class _TestRestAPIState extends State<TestRestAPI> {
  @override
  Widget build(BuildContext context) {
    var tt;
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: FutureBuilder(
        future: getData(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            //future실행 할 때 데이터를 기다림
            return CircularProgressIndicator();
          } else if (snapshot.hasError) {
            //만약 통신시 에러가 날 경우 데이터 표시
            return Text('${snapshot.hasError.toString()}');
          }
          else {
            tt = jsonDecode('${snapshot.data}');
            List<Comment> Comments = [];
            for (Map<String, dynamic> i in tt) {
              var tempValue = Comment.fromJson(i);
              Comments.add(tempValue);
            }
            print('tt[1]의 이름은? ${tt[1]['name']}');
            print('Comments[1]의 이름은? ${Comments[1].name}');
            return ListView(
              children: [
                Text('${snapshot.data}'),
              ],
            );
          }

          }
      )),
    );
  }
}