Samkit Shah
Reputation: 53
Flutter display json array in listview
hello i am new to flutter
i am creating a news app i am trying to retrieve the data from json url and print in listview.
i tried by calling through http but i dont know why the format exception error is coming.
Thanks in advance!
i want to print the json data in listview but i am getting the below error.
I/flutter ( 6077): https://janmabhoominewspapers.com/json.aspx?siteId=8&pDate=21012021
I/flutter ( 6077): "323411" : [{"title" "રસીકરણ મહાઅભિયાનનો શુભારંભ"},{"image" "https//www.janmabhoominewspapers.com/x-admin/PostedImages/43778b6b-ea74-45c0-9600-0ba72c1a618b_670x400.jpg"},{"description" "કોરોના યોદ્ધાઓ અને વિજ્ઞાનીઓનો આભાર મહામારી સામેના જંગમાં જીવની આહુતિ આપનારા આરોગ્યકર્મીઓને યાદ કરતા વડા પ્રધાન ભાવુક બન્યા નવી દિલ્હી, તા. 16 વૈશ્વિક મહામારી કોરોના સામે નિર્ણાયક જંગરૂપે ભારતમાં શનિવારે વિશ્વના સૌથી મોટા રસીકરણ અભિયાનના પ્રારંભ પ્રસંગે ભારે ભાવુક બની ગયેલા વડાપ્રધાન નરેન્દ�
I/flutter ( 6077): runZonedGuarded: Caught error in my root zone.
I/flutter ( 6077): ----------------FIREBASE CRASHLYTICS----------------
I/flutter ( 6077): FormatException: Unexpected character (at character 12)
I/flutter ( 6077): "323411" : [{"title" "રસીકરણ મહાઅભિયાનનો શુભારંભ"},{"image" "https//www.j...
I/flutter ( 6077): ^
I/flutter ( 6077):
I/flutter ( 6077): #0 _ChunkedJsonParser.fail (dart:convert-patch/convert_patch.dart:1404:5)
I/flutter ( 6077): #1 _ChunkedJsonParser.parse (dart:convert-patch/convert_patch.dart:862:48)
I/flutter ( 6077): #2 _parseJson (dart:convert-patch/convert_patch.dart:40:10)
I/flutter ( 6077): #3 JsonDecoder.convert (dart:convert/json.dart:505:36)
I/flutter ( 6077): #4 JsonCodec.decode (dart:convert/json.dart:156:41)
I/flutter ( 6077): #5 _nationalNews.loadYourData (package:janmabhoomi/app_screens/fragment_pravasi_topheadlines.dart:98:29)
I/flutter ( 6077): <asynchronous suspension>
I/flutter ( 6077): #6 _nationalNews.initState (package:janmabhoomi/app_screens/fragment_pravasi_topheadlines.dart:121:5)
I/flutter ( 6077): #7 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4702:58)
I/flutter ( 6077): #8 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4538:5)
I/flutter ( 6077): #9 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3508:14)
I/flutter ( 6077): #10 Element.updateChild (package:flutter/src/widgets/framework.dart:3266:18)
I/flutter ( 6077): #11 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4589:16)
I/flutter ( 6077): #12 E
below is the json data i am trying to print in listview
{ "323411" : [{"title" : "રસીકરણ મહાઅભિયાનનો શુભારંભ"},{"image" : "https://www.janmabhoominewspapers.com/x-admin/PostedImages/43778b6b-ea74-45c0-9600-0ba72c1a618b_670x400.jpg"},{"description" : "કોરોના યોદ્ધાઓ અને વિજ્ઞાનીઓનો આભાર
મહામારી સામેના જંગમાં જીવની આહુતિ આપનારા
આરોગ્યકર્મીઓને યાદ કરતા વડા પ્રધાન ભાવુક બન્યા
નવી દિલ્હી, તા. 16 : વૈશ્વિક મહામારી કોરોના સામે નિર્ણાયક જંગરૂપે ભારતમાં શનિવારે વિશ્વના સૌથી મોટા રસીકરણ અભિયાનના પ્રારંભ પ્રસંગે ભારે ભાવુક બની ગયેલા વડાપ્રધાન નરેન્દ્ર મોદીએ વીડિયો કોન્ફરન્સિંગથી દેશને સંબોધન કર્યું હતું. આરોગ્ય સંકટના શરૂઆતના દિવસોના સંઘર્ષને યાદ કરતાં મોદીની આંખોમાં આંસુ આવી ગયાં હતાં.
સેંકડો સાથીઓ એવા પણ છે, જે કદી પોતાના ઘરે પાછા ન ફર્યા. એક-એક જીવન બચાવવા માટે તેમણે પોતાના જીવનની આહુતિ આપી દીધી. સૌથી પ્રથમ રસી આવા આરોગ્યકર્મીઓને આપી, સમાજ ઋણ ચૂકવી રહ્યો છે, તેવું બોલતા વડાપ્રધાનની આંખો ભીની થઈ ગઈ હતી.
આરોગ્યકર્મીઓ, રસી માટે દેશના વૈજ્ઞાનિકો તેમજ કોરોના યોદ્ધાઓનો આભાર માનતા મોદીએ દેશવાસીઓને રસી અંગે કોઈ પણ પ્રકારની અફવાઓથી બચવાની અપીલ કરી હતી.
રસીનો બીજો ડોઝ લીધા પછી જ રોગપ્રતિકારક શક્તિ વિકસી શકે છે, એ ધ્યાને લેતાં પહેલો ડોઝ લઈ લીધા બાદ માસ્ક ઉતારી નાખવાની ભૂલ ન કરવાની અપીલ પણ તેમણે કરી હતી.
દુનિયાના 100થી વધુ એવા દેશ છે, જેમની કુલ વસતી પણ 3 કરોડથી ઓછી છે, ત્યારે ભારત દેશ માત્ર પહેલાં ચરણમાં ત્રણ કરોડ લોકોને રસી લગાવી રહ્યો છે તેવું વડાપ્રધાને કહ્યું હતું.
મોદીએ જણાવ્યું હતું કે, જનતા કર્ફ્યુ કોરોના સામે લડાઈમાં ભારતના સમાજના સંયમ અને શિસ્તની કસોટી હતી.
જનતા કર્ફ્યુએ જ દેશને લોકડાઉન માટે મનોવૈજ્ઞાનિકરૂપે તૈયાર કર્યો. તાળી-થાળી વગાડીને દીવા પ્રગટાવીને આપણે દેશનો આત્મવિશ્વાસ ઊંચો રાખ્યો તેવું તેમણે ઉમેર્યું હતું."}] ,"323410" : [{"title" : "પ્રથમ દિવસે ત્રણ લાખ લોકોને રસી અપાઈ"},{"image" : "https://www.janmabhoominewspapers.com/x-admin/PostedImages/0bdd1e84-fe8e-4b21-8f36-2ddcfe6c2903_670x400.jpg"},{"description" : "ભારત બાયોટેકે દુષ્પરિણામ બદલ વળતરની સ્પષ્ટતા કરી
નવી દિલ્હી, તા. 16 : ભારતમાં દુનિયાનું સૌથી મોટુ રસીકરણ અભિયાન શરૂ થઈ ચુક્યું છે. વર્તમાન યોજનામાં 3 કરોડ લોકોને પ્રાથમિકતાના આધારે રસી આપવામાં આવી રહી છે. રસીકરણના પહેલા દિવસે 3 લાખથી વધારે સ્વાસ્થ્ય કર્મીઓને રસી આપવામાં આવી હતી. વડાપ્રધાન નરેન્દ્ર મોદી અભિયાનની શરૂઆત કરાવતા 3006 રસીકરણ કેન્દ્ર સાથે વર્ચ્યુઅલી જોડાયા હતા. દરેક જગ્યાએ લગભગ 100 લાભાર્થીને રસી આપવામાં આવી હતી.'' આ દરમિયાન ભારત બાયોટેકની રસી કોવેક્સિનને લઈને સતત સવાલો ઉઠી રહ્યા છે. તેવામાં કંપનીએ સ્પષ્ટ કર્યું છે કે કોઈપણ દુષ્પરિણામ જોવા મળશે તો લાભાર્થીને વળતર આપવામાં આવશે.''
હ ભારતમાં સીરમ' ઈન્સ્ટિટયૂટ દ્વારા વિકસિત કરવામાં આવેલી કોવિશીલ્ડ અને ભારત બાયોટેકની કોવેક્સિનને મંજૂરી આપવામાં આવી છે. જેને પહેલા જ રાજ્યો અને કેન્દ્ર શાસિત પ્રદેશોમાં પહોંચાડી દેવામાં આવી હતી. કોવિશીલ્ડ અને કોવેક્સિનના એક ડોઝની કીંમત ભારતમાં 200થી 295 રૂપિયા સુધી રહી શકે છે.'
હ સ્વાસ્થ્ય્ય મંત્રાલયે રસી બાદના દુષ્પ્રભાવો અંગે ચેતવણી આપી હતી. કોવિશીલ્ડના મામલામાં દુ:ખાવો, માથામાં દુ:ખાવો, થાક, પાઈરેક્સિયા, ઠંડી લાગવી આથ્રાલ્જિયા સહિતના હળવા પ્રભાવ મળી શકે છે. જ્યારે કોવેક્સિનના મામલામાં માથાનો દુ:ખાવા, થાક, તાવ, શરીરમાં દુ:ખાવો, પેટમાં દુ:ખાવો, ચક્કર આવવા વગેરે પ્રભાવ જોવા મળી શકે છે.'
હ તમામ રાજ્યો અને કેન્દ્ર શાસિત પ્રદેશોમાં લખેલા પત્રમાં સ્વાસ્થ્ય મંત્રાલયે કહ્યું હતું કે, કોરોના વાયરસની રસી માત્ર 18 વર્ષ કે તેથી ઉપરના માટે ઈમર્જન્સી ઉપયોગમાં જ આપવાની મંજૂરી છે. બીજો ડોઝ પણ પહેલા ડોઝમાં આપેલી જ રસી હોવી જોઈએ તેમ પણ કહેવામાં આવ્યું હતું.'
હ સ્વાસ્થ્ય કર્મીઓને સૌથી પહેલા રસી મળશે કારણ કે તેઓને સંક્રમણનું જોખમ વધારે છે. ત્યારબાદ ફ્રન્ટલાઈન વર્કર્સનું રસીકરણ થશે. અંતે 50 વર્ષથી વધુ ઉમરના વ્યક્તિઓને રસી આપવામાં આવશે.
હ કો-વિન એક ઓનલાઈન પ્લેટફોર્મ છે જેને કોવિડ-19 રસી વિતરણની દેખરેખ માટે બનાવવામાં આવી છે. સ્વાસ્થ્ય મંત્રાલયના કહેવા પ્રમાણે એન્ટી કોરોનાવાયરસ રસીનો પાયો તૈયાર થશે. એપ લોકો રસીકરણ પ્રક્રિયામાં પોતાને રજીસ્ટર કરવા સક્ષમ બને તે માટે પણ ડિઝાઈન કરવામાં આવી છે.'
હ અહેવાલ અનુસારસી મેળવાનારા વ્યક્તિને એક ફેકટ શીટ અને ખરાબ પરિણામ સંબંધિત ફોર્મ આપવામાં આવશે. જે ફોર્મમાં લાભાર્થીને શરૂઆતી 7 દિવસમાં સામે આવતા લક્ષણો લખવાના રહેશે."}]}
below is the code i tried to print in listview
class JanmabhoomiPravasi_TH extends StatefulWidget {
int index;
String url;
String value_image,value_description,value_title;
JanmabhoomiPravasi_TH({Key key,this.value_image,this.value_description,this.value_title,this.index,this.url}) : super(key:key);
@override
_nationalNews createState() => _nationalNews();
}
class _nationalNews extends State<JanmabhoomiPravasi_TH> with AutomaticKeepAliveClientMixin<JanmabhoomiPravasi_TH> {
List<News> dataList = List();
GlobalKey<ScaffoldState> scaffoldState = GlobalKey();
AdmobBannerSize bannerSize;
bool _isLoading = false;
int o;
BuildContext context1;
List<String> newsIDs = List();
DateTime findLastDateOfTheWeek(DateTime dateTime) {
return dateTime.add(Duration(days: DateTime.daysPerWeek - dateTime.weekday));
}
DateTime findLastDateOfPreviousWeek(DateTime dateTime) {
final DateTime sameWeekDayOfLastWeek =
dateTime.subtract(const Duration(days: 7));
return findLastDateOfTheWeek(sameWeekDayOfLastWeek);
}
Future<String> loadFromAssets() async {
DateTime oops = DateTime.now();
o = DateTime.sunday;
String d_date = DateFormat('ddMMyyyy').format(oops);
var url;
DateTime p = oops.subtract(Duration(days: 1));
String previous_date = DateFormat('ddMMyyyy').format(p);
print(previous_date);
var response1 = await http
.get('https://janmabhoominewspapers.com/json.aspx?siteId=8&pDate='+ d_date,
headers: {"charset": "utf-8", "Accept-Charset": "utf-8"});
if (widget.url == null && response1.statusCode == 200){
url = 'https://janmabhoominewspapers.com/json.aspx?siteId=8&pDate='+ d_date;
}else if(widget.url != null) {
url = 'https://janmabhoominewspapers.com/json.aspx?siteId=8&pDate='+ widget.url;
}else if(response1.statusCode != 200 && widget.url == null){
url = 'https://janmabhoominewspapers.com/json.aspx?siteId=8&pDate='+ previous_date;
}
print(url);
var response = await http
.get(url, headers: {"charset": "utf-8", "Accept-Charset": "utf-8"});
String utfDecode = utf8.decode(response.bodyBytes);
//final validCharacters = RegExp(r'^[a-zA-Z0-9_\-=@,\n.;]+$,');
return utfDecode.replaceAll('<br />', '').replaceAll('\r', '').replaceAll('\n', '').replaceAll('\t', '');
}
Future loadYourData() async {
setState(() {
_isLoading = true;
});
String jsonString = await loadFromAssets();
String newStr = jsonString.substring(1, jsonString.length - 1);
print(newStr);
Map newStringMap = json.decode(newStr);
var list = new List();
newStringMap.forEach((key, value) {
list.add(value);
newsIDs.add(key.toString());
});
for (var newsList in list) {
var news = News.fromJson(newsList);
dataList.add(news);
}
print('This is the length' + dataList.length.toString());
print(dataList[0].title);
print(newsIDs[0]);
setState(() {
_isLoading = false;
});
}
@override
void initState() {
super.initState();
bannerSize = AdmobBannerSize.BANNER;
loadYourData();
String previous = DateFormat('ddMMyyyy').format(findLastDateOfTheWeek(DateTime.now()));
String previous_week = DateFormat('ddMMyyyy').format(findLastDateOfPreviousWeek(DateTime.now()));
print(previous);
print(previous_week);
}
_onShare(BuildContext context) {
final RenderBox box = context.findRenderObject();
Share.share('Get Latest News On Kutchmitra App (Download Now): \n https://play.google.com/store/apps/details?id=com.webpioneer.kutchmitra',
//subject: subject,
sharePositionOrigin:
box.localToGlobal(Offset.zero) &
box.size);
}
@override
Widget build(BuildContext context) {
DateTime oops = DateTime.now();
return Container(
child: Container(
child: _isLoading
? Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
//scrollDirection: Axis.horizontal,
itemCount: dataList.length,
itemBuilder: (context, index) {
if (dataList[index].image.isEmpty){
if (index != 0 && index % 5 == 0) {
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
child:
AdmobBanner(
adUnitId: getBannerAdUnitId(),
adSize: bannerSize,
),
),
],
);
}
return SizedBox(
height: 180,
width: MediaQuery.of(context).size.width,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
print(index);
return Newsdetail(
value_image: dataList[index].image,
value_description:
dataList[index].description,
value_title: dataList[index].title,
value_datalist: dataList,
newsId: newsIDs[index],
value_index: index,
);
}));
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // add this
children: <Widget>[
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
dataList[index].title,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
Text(
dataList[index].description.replaceAll('‘', '').replaceAll('&rsquo', ''),
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
maxLines: 4,
style: TextStyle(fontStyle: FontStyle.italic, fontSize: 16),
),
//MyButton(),
]
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
MyButton(title: dataList[index].title,newsId: newsIDs[index],),
],
),
//MyButton(),
),
],
),
),
],
),
),
);
}
else{
if (index != 0 && index % 5 == 0) {
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
child:
AdmobBanner(
adUnitId: getBannerAdUnitId(),
adSize: bannerSize,
),
),
],
);
}
return SizedBox(
height: 290,
width: MediaQuery.of(context).size.width,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: () {
// dataList;
Navigator.push(context,
MaterialPageRoute(builder: (context) {
print(index);
return Newsdetail(
value_image: dataList[index].image,
value_description:
dataList[index].description,
value_title: dataList[index].title,
value_datalist: dataList,
newsId: newsIDs[index],
value_index: index,
);
}));
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // add this
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
dataList[index].image,
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
dataList[index].title,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
Text(
dataList[index].description.replaceAll('‘', '').replaceAll('&rsquo', ''),
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
maxLines: 2,
style: TextStyle(fontStyle: FontStyle.italic, fontSize: 16),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
//crossAxisAlignment: CrossAxisAlignment.end,
children: [
MyButton(title: dataList[index].title,newsId: newsIDs[index],),
],
),
]
),
),
],
),
// Container(
// child: Row(
// children: <Widget>[
// Container(
// height: 80,
// width: 150,
// child: Image.network(
// dataList[index].image,)
// ),
// Expanded(
// child: Padding(
// padding: EdgeInsets.all(8),
// child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: <Widget>[
// Text(
// dataList[index].title,
// overflow: TextOverflow.ellipsis,
// textAlign: TextAlign.left,
// maxLines: 2,
// style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
// ),
// Text(
// dataList[index].description,
// overflow: TextOverflow.ellipsis,
// textAlign: TextAlign.left,
// maxLines: 2,
// style: TextStyle(fontStyle: FontStyle.italic, fontSize: 16),
// ),
// Row(
// mainAxisAlignment: MainAxisAlignment.start,
// children: <Widget>[
// IconButton(
// icon: Image.asset('images/facebook.png',width: 30,height: 30,),
// padding: EdgeInsets.all(0.0),
// onPressed: () {
// //_openFacebook();
// }),
// IconButton(
// icon: Image.asset('images/twitter.png',width: 30,height: 30,),
// padding: EdgeInsets.all(0.0),
// onPressed: () {
// //_openTwitter();
// },
// ),
// IconButton(
// icon: Image.asset(
// 'images/whatsapp.png',width: 25,height: 25,),
// padding: EdgeInsets.all(0.0),
// onPressed: () {
// //_openWhatsapp();
// },
// ),
// ],
// ),
// ]
// ),
// ),
// ),
// MyButton(),
// ],
// )
// ),
),
],
),
),
);
}
},
),
));
}
String getBannerAdUnitId() {
if (Platform.isIOS) {
return 'ca-app-pub-1286371057513373/8623807971';
} else if (Platform.isAndroid) {
return 'ca-app-pub-1286371057513373/8623807971';
}
return null;
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
class MyButton extends StatelessWidget {
String title,newsId;
MyButton({
this.title,
this.newsId,
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return IconButton(
alignment: Alignment.bottomRight,
icon: Icon(Icons.share,color: Colors.black,),
onPressed: ()
{
final RenderBox box = context.findRenderObject();
Share.share('$title\n\n https://www.phulchhab.com/news/$newsId \n via Phulchhab App (Download Now):\n https://play.google.com/store/apps/details?id=com.webpioneer.phulchhab',
//subject: subject,
sharePositionOrigin:
box.localToGlobal(Offset.zero) &
box.size);
},
);
}
}
Upvotes: 0
Views: 142
Answers (1)
lyio
Reputation: 1427
This might be the problem String newStr = jsonString.substring(1, jsonString.length - 1);.
Why are you stripping the curly braces from the response? When you call jsonDecode it expects a json object, but you stripped away the {}.
And you cannot have a json object starting with the key.
If you try to decode it without stripping away the curly braces it should work.
Upvotes: 1
Related Questions
- displaying Json data as a list
- I am trying to display my JSON response in a List View. Flutter/Dart
- Flutter : Api display Data form json
- How to display JSON nested ArrayList item in flutter?
- How to display JSON data which is in Array list format
- Display nested json array in ListView
- Flutter load json response to List
- Unable to load JSON data to show in ListView
- how to load Json to flutter listview
- How to parse the json data and display it in Listview in Flutter?