Flutter how to json decode with a string and a list

Question

I've spent around an hour looking for this solution somewhere online. I'm new to flutter & dart languages but I'm very comfortable with C# and .net. Even tho dart/flutter use C# syntax a lot of the language feels much different than I thought it would.

I have a restful API in .net which returns a json object of String : String and String : [Array of Strings]. I have an object class within flutter where I can deserialize the response. I already done this with a normal response of just List and String without a problem but now I ran into massive problem. I don't have a clue how I can deserialise a Json that looks like this.

As requested

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
        foregroundColor: Colors.white,
      ),
      drawer: const NavigationDrawer(),
      body: Column(
        children: [
          Center(
            child: Text(templateName),
          ),
          Center(
            child: FutureBuilder<TemplateContentAndArgumentsObject>(
              future: templateContent,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return Text(snapshot.data?.TemplateContent ?? "null");
                } else {
                  return CircularProgressIndicator();
                }
              },
            ),
          ),
        ],
      ),
    );

Api Call Code

Future<TemplateContentAndArgumentsObject> getTemplateContent(
    String customerId, String templateName) async {
  var url = Uri.parse(
      'https://localhost:7167/api/v1/Templates/$customerId/$templateName');

  var response = await http.get(url, headers: {
    "Accept": "application/json",
    "Access-Control-Allow-Origin": "*"
  });

  try {
    print(response.body);
    var sm = json.decode(response.body);
    print(sm);
  } catch (ex) {
    print(ex);
  }

  if (response.statusCode == 200) {
    TemplateContentAndArgumentsObject obj =
        TemplateContentAndArgumentsObject.fromJson(json.decode(response.body));
    print(obj.TemplateContent);
    print(obj.TemplateArguments);
    return obj;
  } else {
    print('Request failed with status: ${response.statusCode}');
  }

  return TemplateContentAndArgumentsObject(
      TemplateContent: "", TemplateArguments: new List<String>.empty());
}

Class Object

import 'package:flutter/cupertino.dart';

class TemplateContentAndArgumentsObject {
  String TemplateContent;
  List<String> TemplateArguments;

  TemplateContentAndArgumentsObject({
    required this.TemplateContent,
    required this.TemplateArguments,
  });

  factory TemplateContentAndArgumentsObject.fromJson(
    Map<String, dynamic> json,
  ) =>
      TemplateContentAndArgumentsObject(
        TemplateContent: json["TemplateContent"] as String,
        TemplateArguments: (json["TemplateArguments"] as List<String>),
      );
}

Image of Json

Please don't post code/text as images. It makes it hard for us to write code that fits yours and try out the example JSON. Stackoverflow have builtin syntax highlight for a lot of languages so use that instead. — julemand101, Jun 21 '22 at 10:18
There are some online tools which convert json to dart file like this - https://app.quicktype.io/ — Harish Sharma, Jun 21 '22 at 10:19

score 0 · Accepted Answer · edited Jun 21 '22 at 10:32

0

Below is Sample Code for your problem. Please be aware that the code is just created based on your example where your list just contains String objects. In case your list contains more advanced objects, we should model them individually and put into a list. But for the strings you can do something like this:

class TemplateContentAndArgumentsObject {
  String myStringContent;
  List<String> myArrayContent;

  TemplateContentAndArgumentsObject({
    required this.myStringContent,
    required this.myArrayContent,
  });

  factory TemplateContentAndArgumentsObject.fromJson(
    Map<String, dynamic> json,
  ) =>
      TemplateContentAndArgumentsObject(
        myStringContent: json["myStringContent"] as String,
        myArrayContent:
            (json["myArrayContent"] as List<dynamic>).cast<String>(),
      );

  Map<String, Object> toJson() => {
        "stringContnet": myStringContent,
        "arrayCOntnet": myArrayContent,
      };
}

I have changed the fromJson constructor into a factory constructor that just calls the class constructor. By doing so it removes the need for the class variables to be declared late.

edited Jun 21 '22 at 10:32

julemand101

28,470
5
52
48

answered Jun 21 '22 at 10:18

Harish Sharma

1,189
1
8
19

In your `toJson` you can just do: `"arrayCOntnet": arrayCOntnet`. No need for further conversion. – julemand101 Jun 21 '22 at 10:19
Yes we can but that is good practice if we have a array of Custom model instead of array of String – Harish Sharma Jun 21 '22 at 10:22
1

No its not? Dart will automatically call `toJson()` on any object is does not know how to serialize. So as long as your custom type in the list does implement `toJson()` it is fine to just have them in the returned list. Also, this `.map((x) => x)` seems rather unnecessary in general. You can use `.cast` instead if your purpose is to cast the elements to a given type. – julemand101 Jun 21 '22 at 10:23
Done. I also added some description. Please just make corrections if you see a need for that. :) – julemand101 Jun 21 '22 at 10:33
It's look good now but i have question what if have list of other model Object instead of String For eg: [{"data":"xyz"},{"data":"xyz"}, {"data":"xyz"}] can we use cast method here – Harish Sharma Jun 21 '22 at 10:40
@HarishSharma you could do something like `myArrayContent: List.from(json["myArrayContent"].map((b) => MyObject.fromJson(b)))`, where `MyObject` is the other model Object, which should implement its own `fromJson()` – Ivo Jun 21 '22 at 10:49
I've just tried your solution and I need getting this massive error. Please take a look at this image https://prnt.sc/S-EN9Zvm_3xk. – ThisQRequiresASpecialist Jun 21 '22 at 10:51
@ThisQRequiresASpecialist Could you show the code where it fails? – julemand101 Jun 21 '22 at 11:15
It doesn't get past here. https://prnt.sc/9NpRKBvJKJz2 – ThisQRequiresASpecialist Jun 21 '22 at 11:23
@ThisQRequiresASpecialist You are not making this easy... What are there on line 54 in `screens/template_details_screen.dart`. – julemand101 Jun 21 '22 at 11:28
It just contains a print statement so I can see the data. print(snapshot.data!.TemplateContent); – ThisQRequiresASpecialist Jun 21 '22 at 11:29
@ThisQRequiresASpecialist Yeah... but that is your error right here. The `!` in `snapshot.data!` adds a runtime null-check. So your application are crashing since `data` are `null` here. – julemand101 Jun 21 '22 at 11:31
Please read the documentation about `.data` to understand in what situations this field can be null and how to check for it: https://api.flutter.dev/flutter/widgets/AsyncSnapshot/data.html – julemand101 Jun 21 '22 at 11:32
@ThisQRequiresASpecialist you can print like this print(snapshot.data?.TemplateContent); it will print null if snapshot.data is null else TemplateContent it it is not null – Harish Sharma Jun 21 '22 at 11:36
So how can I pull out my data from my object then at this point?? I want to display it as it finishes. – ThisQRequiresASpecialist Jun 21 '22 at 11:37
You can use if (snapshot.hasData && snapshot.data !=null){ // render widget according to data }else{ return Container(); } You can check Snapshot State also and show widget accordingly – Harish Sharma Jun 21 '22 at 11:38
I used this to display text snapshot.data?.TemplateContent ?? "null" but I get null everytime.... – ThisQRequiresASpecialist Jun 21 '22 at 11:39
can you share your code of future builder? – Harish Sharma Jun 21 '22 at 11:41
Sure here you go. https://prnt.sc/SjShBu09Rv8N – ThisQRequiresASpecialist Jun 21 '22 at 11:42
Hey share proper code here as it is not possible to edit your code from screenshot – Harish Sharma Jun 21 '22 at 12:02
Sure I will add code snippet to the question. – ThisQRequiresASpecialist Jun 21 '22 at 12:15

score 0 · Answer 2 · answered Jun 21 '22 at 12:41

0

Hey you can modify your build method, you need to check condition snapshot.hasData, for more detail see FutureBuilder

 @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(title),
            centerTitle: true,
            backgroundColor: Colors.blueGrey,
            foregroundColor: Colors.white,
          ),
          drawer: const NavigationDrawer(),
          body: Column(
            children: [
              Center(
                child: Text(templateName),
              ),
              Center(
                child: FutureBuilder<TemplateContentAndArgumentsObject>(
                  future: templateContent,
                  builder: (context, snapshot) {
    
                    if (snapshot.hasData) {
                      return Text(snapshot.data?.TemplateContent ?? "");
                    }else if (snapshot.hasError){
                        /// return error widget 
                        return Container();
                       } else {
                      return CircularProgressIndicator();
                    }
                  },
                ),
              ),
            ],
          ),
        );

answered Jun 21 '22 at 12:41

Harish Sharma

1,189
1
8
19

Thanks for that error code it helped me to find out what the error is. But IDK how it is not receiving List!!! It says that the list is gets is Dynamic... even tho my 1st object properly is a normal String... – ThisQRequiresASpecialist Jun 21 '22 at 12:58
that should be List of String instead of dynamic – Harish Sharma Jun 21 '22 at 13:12
1

No Worries I finally got it working to an extent, I really think that this is a mission to get objects in dart/flutter compare to like C# but it is what it is I've learnt a lot thanks for the help! – ThisQRequiresASpecialist Jun 21 '22 at 13:15
You welcome, i would appreciate if you can upvote my answer if you found useful for you – Harish Sharma Jun 21 '22 at 13:16
I have but I dont have enough reputation yet for it to be visible. – ThisQRequiresASpecialist Jun 23 '22 at 06:36

score -2 · Answer 3 · answered Jun 21 '22 at 11:56

//map to String

Map<String, dynamic> mapData = { "username":name, "email":email, "phoneNumber":mobileNo, "password":password , "refCode": inviteCode, "countryCode":countryCode, "country": "india" };

json.encode(mapData);

// map to list

List values = List();

mapData.forEach((v) => values.add(v)); print(values);

Flutter how to json decode with a string and a list

3 Answers3