How to parse the JSON response from URL in flutter

Question

I am new to flutter and want to parse the data from a URL that is in json format. The url that I am using is json link . I want to get the "verse" and "chapter" fields from the json array. I have succeeded in getting the response body in snackbar but not able to get single values. I want to get the "verse" and "chapter" and show then in text box. I am using Dart.

Here is the method that I am using:

 _makeGetRequest() async {
    // make request
    var url = Uri.parse("http://quotes.rest/bible/vod.json");
    Response response = await http.get(url);

    // sample info available in response
    int statusCode = response.statusCode;
    Map<String, String> headers = response.headers;
    String contentType = headers['content-type'];
    String json = response.body;

    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(json)));

  }

 @override
  void initState() {
    super.initState();
    streamingController.config(url: "http://stream.zeno.fm/qa8p6uz2tk8uv");
    streamingController.play();
    _makeGetRequest();
  }

Please help me in getting the proper field values and set them in text box as I am trying to solve it from past two days and have tried all solutions from internet but getting exceptions.

Does this answer your question? Flutter how to parse JSON data — Patrick O'Hara
– Patrick O'Hara, Commented Apr 29, 2021 at 9:54

Moaid ALRazhy · Accepted Answer · 2021-04-29 09:43:59Z

6

use jsonDecode

 Map<String,dynamic> data = jsonDecode(response.body);
 String verse = data["contents"]["verse"];
 dynamic chapter= data["contents"]["chapter"];

however I recommend modeling your data

answered Apr 29, 2021 at 9:43

Moaid ALRazhy

1,7571 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mehwish Mustafa Over a year ago

Thank u it worked for me.. I am able to show it in snackbar .. But How can I show it in the text box as this is inside a method?

Moaid ALRazhy Over a year ago

take a look at FutureBuilder api.flutter.dev/flutter/widgets/FutureBuilder-class.html

Moaid ALRazhy Over a year ago

and if previous answer solved your problem upvote and mark question as answered ;)

Mehwish Mustafa Over a year ago

How can I return the verse string so it will be accessible in class?

Moaid ALRazhy Over a year ago

Future<String> _makeGetRequest() async { await someApiWork(); return verse; }

Collectives™ on Stack Overflow

How to parse the JSON response from URL in flutter

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related