CODEWITHSUNDEEP
flutter
raj
raj

Reputation: 341

Parsing JSON array in flutter

My JSON response is

 [
{
"0":"CSE",
"branch":"CSE",
"1":"1",
"count(`branch`)":"1"
},
{
"0":"ECE",
"branch":"ECE",
"1":"2",
"count(`branch`)":"2"
},
{
"0":"IT",
"branch":"IT",
"1":"1",
"count(`branch`)":"1"
}
]

I want to the output like the following in the Fulturebuilder

    BRANCH   COUNT
      CSE      1
      ECE      2
      IT       1

I tried the following to get the branch, but no luck:

ListTile( title:new Text('${snapshot.data[index].branch.toString()}),

Upvotes: 0

Views: 371

Answers (4)

miguelik
miguelik

Reputation: 525

You can parse your JSON to an object like this;

Use this web in order to parse your String into an object;

https://app.quicktype.io/

The code you need for parsing your JSON as an object is

// To parse this JSON data, do
//
//     final exampleStackOverflow = exampleStackOverflowFromJson(jsonString);

import 'dart:convert';

List<ExampleStackOverflow> exampleStackOverflowFromJson(String str) => 
List<ExampleStackOverflow>.from(json.decode(str).map((x) => 
ExampleStackOverflow.fromJson(x)));

 String exampleStackOverflowToJson(List<ExampleStackOverflow> data) => 
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class ExampleStackOverflow {
String the0;
String the1;
String branch;
String countBranch;

ExampleStackOverflow({
    this.the0,
    this.the1,
    this.branch,
    this.countBranch,
});

factory ExampleStackOverflow.fromJson(Map<String, dynamic> json) => 
 ExampleStackOverflow(
    the0: json["0"],
    the1: json["1"],
    branch: json["branch"],
    countBranch: json["count(`branch`)"],
);

Map<String, dynamic> toJson() => {
    "0": the0,
    "1": the1,
    "branch": branch,
    "count(`branch`)": countBranch,
};
}

then just do in your method where you make the request

final exampleStackOverflow = exampleStackOverflowFromJson(jsonString); //json 
 string usually will be response.body

After that, in order to get your output yo just need to call the data from the object. It is much easier to use JSON's like this in my opinion.

You should make the method where you call for the JSON return a Future instead of String, and the you will be able to do myObject = snapshot.data; finally:

  ListTile( title:new Text(MyObject.branch),

In case you receive more than 1 object, just return a List.

Upvotes: 0

Jay Mungara
Jay Mungara

Reputation: 7150

As your json data is in the format of List<Map<String,String>> you you can easily do it by the following code.

import 'package:flutter/material.dart';

class DemoPage extends StatelessWidget {
  var response = [
    {"0": "CSE", "branch": "CSE", "1": "1", "count(`branch`)": "1"},
    {"0": "ECE", "branch": "ECE", "1": "2", "count(`branch`)": "2"},
    {"0": "IT", "branch": "IT", "1": "1", "count(`branch`)": "1"}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: response.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(response[index]["branch"]),
            subtitle: Text(response[index]["count(`branch`)"]),
          );
        },
      ),
    );
  }
}

Also, if you are using the response from the network then you should format your response using json.decode(response); then you can follow the above code.

Upvotes: 0

Ravinder Kumar
Ravinder Kumar

Reputation: 7990

Try,

ListTile( title:new Text('${snapshot.data[index][branch]}),

But I would recommend approch I explained here

Upvotes: 1

David L.
David L.

Reputation: 852

JSON is a String. You have to convert it first, using json.decode for example.

Upvotes: 1

Related Questions