TIL D-65 Flutter 와 Nodejs 연동하기2 - jsonArray

오늘 배운 것>

1. JsonObject
2. JsonArray
3. Json Serialization 직렬화

오늘의 에러>

type 'InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'List<dynamic>'

(참고: https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51)

 

저번에는 상품 한 개 단위로 보내는 것에 성공했고, 오늘은 상품 여러개를 백엔드쪽에서 jsonArray 형태로 보내고 플러터에서 받는 작업을 시도했다. 

 

오늘 작업에서는 jsonObject 와 jsonArray 에 대한 이해가 필요했다. (참고: https://aljjabaegi.tistory.com/40)

 

1. jsonObject

-기본구조: {String name: Value, String name2: Value2, ...}

-특징: 비순서화된 set이고, key-value 형태를 가진다. java의 HashpMap 과 대응.

 

2. jsonArray

-기본구조: [{String name: Value}, {String name2: Value2},...]

-특징: 순서화된 set이고, [] 안에 jsonObejct, String 값 등을 담는다. java의 ArrayList 와 대응.

jsonArray 는 json을 배열 형태로 나타내어 인덱스별로 나눠 저장함으로써 중복되는 문제를 피할 수 있게 해준다.

 

다시 오늘 작업내용으로 돌아가면, 처음에 보냈던 jsonObject 는 다음과 같다.

{"products":
	[
          {
          "id":9,
          "name":"cat1",
          "thumbnail":"products-1574397617056.png",
          "price":1000
          }
     ]
 }

이렇게 보냈을 때 status 는 Get/200 이지만 플러터에서 받아서 띄운 값이 null 로 나왔다.

따라서 두번째 방법으로 보낸 jsonArray 는 다음과 같다.

[
	{
      "id":9,
      "name":"cat1",
      "thumbnail":"products-1574397617056.png",
      "price":1000
      },
      {
      "id":12,
      "name":"폰케이스",
      "thumbnail":"products-1574592431291.jpeg",
      "price":2000
    }
]

 

두 가지 방식으로 보내기 위한 nodejs 코드는 다음과 같다. 

//jsonObject 로 보낸 경우
res.json({products});


//jsonArray 로 보낸 경우. 위 코드를 다음과 같이 수정했다.
res.json(products);

 

json 형태 구분하기>

간단히 객체라면 {}, 배열이라면 [] 로 시작하고 끝난다고 생각하면 된다.

jsonObject => { {},{},[{},{},{}]}
jsonArray => [{},{},{}]
jsonElement => {}

 

코드실습>

참고: https://like-tomato.tistory.com/83

//jsonObejct

{
  "id":1,
  "name":"ProductName",
  "images":
  [
    {
      "id":11,
      "imageName":"X-mas"
    },
    {
      "id":31,
      "imageName":"fruit"
    }
  ]
}

//jsonArray 와 jsonElement 가 섞여있으므로 2가지를 분리한다.
//id, name 을 파싱하기 위해 최초의 jsonObject 에서 아래와 같이 파싱한다.
String id = jsonObject.get("id").getAsString();
String name = jsonObject.get("name").getAsString();

//images 의 내용을 파싱하기 위해서는 jsonArray, jsonElement 를 이용한다.
//images 의 {},{} 를 각각의 Array로 받을 수 있고, 각각의 Array를 Element 로 분리할 수 있다.
//위 예제 데이터는 images 에 {}가 2개이므로 size=2, 0과 1의 인덱스를 가진 데이터로 나눈다.
JsonArray jsonArray = jsonObject.getAsJsonArray("images");
JsonElement jsonElement1 = jsonArray.get(0);
JsonElement jsonElement2 = jsonArray.get(1);
String imageName1 = jsonElement1.getAsJsonObject().get("imageName").getAsString();
String imageName2 = jsonElement2.getAsJsonObject().get("imageName").getAsString();

//result
imageName1 = X-mas
imageName2 = fruit

 

추가로 찾아본 것>

직렬화(serialization)란 네트워크를 통해 어떠한 데이터 구조를 송수신하거나 저장하기 위해 전송에 적합한 포맷으로 변환하는 과정이다. 그 형식 중 하나가 json이다.

Json은 JavaScript Object Notation 의 약자이고, javascript의 객체를 표현하기 위한 포맷이다. key-value 쌍으로 이루어진 object 타입과 값들을 순서화하여 열거한 array 타입으로 나뉜다. 

 

프로젝트의 규모에 따라서 json 직렬화 방식을 선택한다.

-> 일반 직렬화 방식 vs. serialize 라이브러리 사용

(참고: https://flutter-ko.dev/docs/development/data-and-backend/json#%EC%A4%91%EB%8C%80%ED%98%95-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EB%8A%94-%EC%BD%94%EB%93%9C-%EC%83%9D%EC%84%B1%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%84%B8%EC%9A%94)