How to render key and value with key having a custom name

Question

I have a list of key value pair.

I am fetching them from an api using this function

 void getPastSurvey() async {
   
    var response = await http.get(
        Uri.parse(
            "https://google.com/get_contact_data"),
        headers: {"Authorization": "Bearer $token"});
    int status = response.statusCode;
    var body = json.decode(response.body);


      try {
        List screenDataLong = body["screen_data_long"]["data"];
        for (var i in screenDataLong) {
          questions[i["key"]] = i["value"];
      } catch (e) {
        // debugPrint("caught error");
        // debugPrint("$e");
      }

    }
  }

this is the json

"screen_data_long": {
        "conversation_id": "2laXjNPwlKI61qPQC6Xb16-us",
        "date": "2022-02-12T06:17:08.58",
        "contact": "contact 3",
        "data": [
            {
                "key": "user_id",
                "value": "afc7e6ff-878a-418b-9a2f-6f7fe2240085"
            },
            {
                "key": "user_email",
                "value": "tester@gmail.com"
            },
            {
                "key": "contact_id",
                "value": "contact 3"
            },
            {
                "key": "conversation_id",
                "value": "2laXjNPwlKI61qPQC6Xb16-us"
            },
            {
                "key": "participant_id",
                "value": "nphcda005555222"
            },
            {
                "key": "completed_at",
                "value": "2022-02-12T06:17:08.5796315+02:00"
            },
            {
                "key": "override_contact_data",
                "value": "Yes"
            },
            {
                "key": "seek_advice",
                "value": "Yes"
            },
            {
                "key": "reacto_items",
                "value": "[Fever]"
            },
            {
                "key": "reacto_begin",
                "value": "2022-02-12"
            },
            {
                "key": "reacto_status",
                "value": "Recovered/resolved"
            },
            {
                "key": "reacto_resolved_date",
                "value": "2022-02-12"
            },
            {
                "key": "reacto_impact_level",
                "value": "Uncomfortable (nuisance or irritation) but able to carry on with everyday activities"
            },
            {
                "key": "patient_pregnancy",
                "value": "Yes"
            }

I have small widget function to render the data

List<Widget> generateData() {
    List<Widget> list = <Widget>[];
    questions.forEach((key, value) {
      list.add(Text(key, style: TextStyle(fontSize: 20.0)));
      list.add(Text(value, style: TextStyle(fontSize: 16.0)));
      list.add(Container(margin: EdgeInsets.all(15.0)));
    });

    return list;
  }

And then I render it to the ui under a scroll view like

 SingleChildScrollView(
                    child: Padding(
                        padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: generateOldSurvey())))

I want to assign the keys custom values that are readable to the user and not DB names with underscores. Like the key user_email I display it as User email with the correct value under it. How can I achieve this correctly inside the SingleChildScrollView ?

@JsonKey(name: 'Email') try this in your model class user_email property.https://docs.flutter.dev/development/data-and-backend/json — lava, Feb 13 '22 at 14:38
```/// Tell json_serializable that "registration_date_millis" should be /// mapped to this property. @JsonKey(name: 'registration_date_millis') final int registrationDateMillis;``` — lava, Feb 13 '22 at 14:40
https://docs.flutter.dev/development/data-and-backend/json#creating-model-classes-the-json_serializable-way — lava, Feb 13 '22 at 18:42

score 0 · Answer 1 · answered Feb 13 '22 at 14:47

You need to manually handle String in your keys. Eg: if you want all the keys in the format user_email as User Email you can split the string and add it

List<Widget> generateData() {
    List<Widget> list = <Widget>[];
    questions.forEach((key, value) {
      var keyList = key.split('_');  // ["user","email"]
      var keyValue = "${keyList[0]} ${keyList[1]}"; // "user name"
      list.add(Text(keyValue, style: TextStyle(fontSize: 20.0)));
      list.add(Text(value, style: TextStyle(fontSize: 16.0)));
      list.add(Container(margin: EdgeInsets.all(15.0)));
    });

    return list;
  }

You can then title case the keyValue Using this

Hi Ganesh I want to set custom texts for all keys, not onlly the user email but all other fields — arriff, Feb 13 '22 at 15:00

How to render key and value with key having a custom name

1 Answers1