I want to fetch data from an api. Here is the api link and response:
https://digital-display.betafore.com/api/v1/digital-display/displays/
Authorization Bearer:
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3ODExNjkwLCJpYXQiOjE2Njc3MjUyOTAsImp0aSI6IjFmMjBkNDgyY2E3NzQzMGQ5MzM3ZjU3MTBlYjIzY2NhIiwiaWQiOjV9.QGvXtfHwWEJawAS-zIKo78UaCvMDr2lXx0796QcL_-4
Here is the Response:
{
"status": "success",
"results": [
{
"id": 12,
"products": [
{
"id": 1,
"name": "Test",
"unit": null,
"price": "72000.00",
"sale_price": null,
"image": "/uploads/digital_display/products/Screenshot_from_2022-10-31_13-04-58.png",
"category": null,
"badge": null
}
],
"catalogs": [
{
"id": 12,
"name": null,
"unit": null,
"price": null,
"sale_price": null,
"image": "/uploads/digital_display/catalogs/survivor-series-2021_LSje3Zz.jpg",
"video": null,
"badge": null
}
],
"name": "asdas",
"description": null,
"category": "sdasdasd",
"template_name": "dasda",
"banner_text": null
},
{
"id": 13,
"products": [
{
"id": 1,
"name": "Test",
"unit": null,
"price": "72000.00",
"sale_price": null,
"image": "/uploads/digital_display/products/Screenshot_from_2022-10-31_13-04-58.png",
"category": null,
"badge": null
}
],
"catalogs": [
{
"id": 13,
"name": null,
"unit": null,
"price": null,
"sale_price": null,
"image": "/uploads/digital_display/catalogs/survivor-series-2021_ndrmDBX.jpg",
"video": null,
"badge": null
}
],
"name": "asdas",
"description": null,
"category": "sdasdasd",
"template_name": "dasda",
"banner_text": null
},
{
"id": 14,
"products": [
{
"id": 1,
"name": "Test",
"unit": null,
"price": "72000.00",
"sale_price": null,
"image": "/uploads/digital_display/products/Screenshot_from_2022-10-31_13-04-58.png",
"category": null,
"badge": null
}
],
"catalogs": [
{
"id": 14,
"name": null,
"unit": null,
"price": null,
"sale_price": null,
"image": "/uploads/digital_display/catalogs/20220913_nxt_newlogo--52bc0a658df3cb6753ffd8b7da947690.jpg",
"video": null,
"badge": null
}
],
"name": "asdasd",
"description": null,
"category": "sdasd",
"template_name": "sdada",
"banner_text": null
},
{
"id": 15,
"products": [
{
"id": 1,
"name": "Test",
"unit": null,
"price": "72000.00",
"sale_price": null,
"image": "/uploads/digital_display/products/Screenshot_from_2022-10-31_13-04-58.png",
"category": null,
"badge": null
}
],
"catalogs": [
{
"id": 15,
"name": null,
"unit": null,
"price": null,
"sale_price": null,
"image": "/uploads/digital_display/catalogs/survivor-series-2021.jpg",
"video": null,
"badge": null
}
],
"name": "Sony Bravia",
"description": null,
"category": "Restaurant",
"template_name": "Sony Template",
"banner_text": null
},
{
"id": 16,
"products": [
{
"id": 1,
"name": "Test",
"unit": null,
"price": "72000.00",
"sale_price": null,
"image": "/uploads/digital_display/products/Screenshot_from_2022-10-31_13-04-58.png",
"category": null,
"badge": null
}
],
"catalogs": [
{
"id": 16,
"name": null,
"unit": null,
"price": null,
"sale_price": null,
"image": "/uploads/digital_display/catalogs/1033561.jpg",
"video": null,
"badge": null
}
],
"name": "asdas",
"description": null,
"category": "sdasdasd",
"template_name": "dasda",
"banner_text": null
}
]
}
Here is my controller where I used http package for fetching data from the api.
Future<bool> getDisplays() async {
var url = Uri.parse(
"https://digital-display.betafore.com/api/v1/digital-display/displays/");
var token = localStorage.getItem('access');
try {
http.Response response = await http.get(url, headers: {
"Authorization":
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3NzYwOTY1LCJpYXQiOjE2Njc2NzQ1NjUsImp0aSI6ImE1ZjAyOTJlYTE1MjRhNDM5YzI2YWYwZGQzNjA3YjZlIiwiaWQiOjV9.yjKKzalzRvSrSiSBUhZtZVg3wBy_o7P2Wvy7sbMOOT0"
});
var data = json.decode(response.body) as List;
List<DisplayModel> temp = [];
for (var element in data) {
DisplayModel displayModel = DisplayModel.fromJson(element);
temp.add(displayModel);
}
_displays = temp;
notifyListeners();
return true;
} catch (exception) {
return false;
}
}
List<DisplayModel> get displays {
return [..._displays];
}
Here is model:
class DisplayModel {
String? status;
List<Results>? results;
DisplayModel({this.status, this.results});
DisplayModel.fromJson(Map<String, dynamic> json) {
status = json['status'];
if (json['results'] != null) {
results = <Results>[];
json['results'].forEach((v) {
results!.add(new Results.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['status'] = this.status;
if (this.results != null) {
data['results'] = this.results!.map((v) => v.toJson()).toList();
}
return data;
}
}
class Results {
int? id;
List<Products>? products;
List<Catalogs>? catalogs;
String? name;
Null? description;
String? category;
String? templateName;
Null? bannerText;
Results(
{this.id,
this.products,
this.catalogs,
this.name,
this.description,
this.category,
this.templateName,
this.bannerText});
Results.fromJson(Map<String, dynamic> json) {
id = json['id'];
if (json['products'] != null) {
products = <Products>[];
json['products'].forEach((v) {
products!.add(new Products.fromJson(v));
});
}
if (json['catalogs'] != null) {
catalogs = <Catalogs>[];
json['catalogs'].forEach((v) {
catalogs!.add(new Catalogs.fromJson(v));
});
}
name = json['name'];
description = json['description'];
category = json['category'];
templateName = json['template_name'];
bannerText = json['banner_text'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
if (this.products != null) {
data['products'] = this.products!.map((v) => v.toJson()).toList();
}
if (this.catalogs != null) {
data['catalogs'] = this.catalogs!.map((v) => v.toJson()).toList();
}
data['name'] = this.name;
data['description'] = this.description;
data['category'] = this.category;
data['template_name'] = this.templateName;
data['banner_text'] = this.bannerText;
return data;
}
}
class Products {
int? id;
String? name;
Null? unit;
String? price;
Null? salePrice;
String? image;
Null? category;
Null? badge;
Products(
{this.id,
this.name,
this.unit,
this.price,
this.salePrice,
this.image,
this.category,
this.badge});
Products.fromJson(Map<String, dynamic> json) {
id = json['id'];
name = json['name'];
unit = json['unit'];
price = json['price'];
salePrice = json['sale_price'];
image = json['image'];
category = json['category'];
badge = json['badge'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['name'] = this.name;
data['unit'] = this.unit;
data['price'] = this.price;
data['sale_price'] = this.salePrice;
data['image'] = this.image;
data['category'] = this.category;
data['badge'] = this.badge;
return data;
}
}
class Catalogs {
int? id;
Null? name;
Null? unit;
Null? price;
Null? salePrice;
String? image;
Null? video;
Null? badge;
Catalogs(
{this.id,
this.name,
this.unit,
this.price,
this.salePrice,
this.image,
this.video,
this.badge});
Catalogs.fromJson(Map<String, dynamic> json) {
id = json['id'];
name = json['name'];
unit = json['unit'];
price = json['price'];
salePrice = json['sale_price'];
image = json['image'];
video = json['video'];
badge = json['badge'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['name'] = this.name;
data['unit'] = this.unit;
data['price'] = this.price;
data['sale_price'] = this.salePrice;
data['image'] = this.image;
data['video'] = this.video;
data['badge'] = this.badge;
return data;
}
}
Here is frontend where I tried to show but gettting errors.
here is the error I am getting : "Index out of range: no indices are valid: 0"
Here is the frontend code:
import 'package:digitaldisplay/controllers/DisplayController.dart';
import 'package:digitaldisplay/views/screens/CreateDisplay.dart';
import 'package:digitaldisplay/views/screens/CreateProduct.dart';
import 'package:digitaldisplay/views/screens/ShowDisplay.dart';
import 'package:digitaldisplay/views/widgets/NavBar.dart';
import 'package:digitaldisplay/views/widgets/Package.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:responsive_toolkit/responsive_toolkit.dart';
import 'package:responsive_grid/responsive_grid.dart';
import '../../models/DisplayModel.dart';
import '../widgets/Display.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
static const routeName = "/home";
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool _init = true;
bool _loadingDisplay = false;
@override
void didChangeDependencies() async {
if (_init) {
_loadingDisplay =
await Provider.of<DisplayController>(context).getDisplays();
setState(() {});
}
_init = false;
super.didChangeDependencies();
}
DisplayController displayController = DisplayController();
@override
Widget build(BuildContext context) {
final displays = Provider.of<DisplayController>(context).displays;
final ButtonStyle buttonStyle2 = ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF111111),
shape: const StadiumBorder(),
minimumSize: const Size(100, 50),
);
final ButtonStyle buttonStyle1 = ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFc3232a),
shape: const StadiumBorder(),
minimumSize: const Size(100, 50),
);
return Scaffold(
backgroundColor: const Color(0xFFf5f5f5),
drawer: const NavBar(),
appBar: AppBar(
leading: const Icon(Icons.menu, color: Colors.black),
title: const Text(
"Digital Display",
style: TextStyle(
fontStyle: FontStyle.italic,
color: Color(0xFF111111),
fontWeight: FontWeight.bold,
),
),
backgroundColor: const Color(0xFFe9e9ff),
elevation: 0,
),
body: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CreateDisplay()),
);
},
child: Text("Create Display"),
style: buttonStyle2,
),
),
],
),
Flexible(
child: GridView.count(
crossAxisCount: 3,
children: List.generate(
displays[0].results!.length,
(i) => DisplayCard(
displayName: displays[i].results![i].name as String,
displayImage: displays[i].results![i].catalogs![i].image
as String,
id: displays[i].results![i].id as int))),
),
// Flexible(
// child: FutureBuilder(
// future: displayController.getallDisplay(),
// builder: (context, snapshot) {
// if (snapshot.hasData) {
// return GridView.count(
// physics: const ScrollPhysics(),
// crossAxisCount: 4,
// crossAxisSpacing: 5,
// children: List.generate(
// snapshot.data?["results"].length, (i) {
// return InkWell(
// onTap: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => ShowDisplay(
// snapshot.data["results"]?[i]["id"])),
// );
// },
// child: DisplayCard(
// id: snapshot.data["results"]?[i]["id"],
// displayName: snapshot.data["results"]?[i]["name"],
// displayImage: snapshot.data["results"]?[i]
// ["catalogs"][0]["image"],
// ),
// );
// }));
// } else if (snapshot.hasError) {
// return Center(child: Text(snapshot.error.toString()));
// } else {
// return const Center(child: CircularProgressIndicator());
// }
// }),
// ),
// Flexible(
// child: FutureBuilder(
// future: displayController.getallDisplay(),
// builder: (context, snapshot) {
// if (snapshot.hasData) {
// return GridView.count(
// crossAxisCount: 4,
// children: List.generate(displays.length, (i) {
// return DisplayCard(
// displayModel: displays,
// );
// }),
// );
// } else if (snapshot.hasError) {
// return Center(
// child: Text(snapshot.error.toString()),
// );
// } else {
// return const Center(
// child: Text("Error"),
// );
// }
// }),
// ),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Dashboard"),
style: buttonStyle1,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
Navigator.of(context)
.pushReplacementNamed(CreateProduct.routeName);
},
child: Text("Create Product"),
style: buttonStyle2,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {},
child: Text("Logout"),
style: buttonStyle2,
),
),
],
),
],
),
);
}
}
I tried this method but failed to fetch data for that error maybe I did something wrong in the code but I don't have any idea why I am getting an error like this. can you please explain the solution of the error? And How can I fetch data from the api?
CodePudding user response：
You need to make a few changes:
In your controller, instead of:
var data = json.decode(response.body) as List;
List<DisplayModel> temp = [];
for (var element in data) {
DisplayModel displayModel = DisplayModel.fromJson(element);
temp.add(displayModel);
}
do:
var data = json.decode(response.body);
List<DisplayModel> temp = [];
temp.add(DisplayModel.fromJson(data));
and in the frontend part, in your DisplayCard, change:
displays[i].results![i]
to:
displays[0].results![i]
CodePudding user response：
First change your getDisplays to this:
Future<List<Results>> getDisplays() async {
var url = Uri.parse(
"https://digital-display.betafore.com/api/v1/digital-display/displays/");
var token = localStorage.getItem('access');
try {
http.Response response = await http.get(url, headers: {
"Authorization":
"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjY3NzYwOTY1LCJpYXQiOjE2Njc2NzQ1NjUsImp0aSI6ImE1ZjAyOTJlYTE1MjRhNDM5YzI2YWYwZGQzNjA3YjZlIiwiaWQiOjV9.yjKKzalzRvSrSiSBUhZtZVg3wBy_o7P2Wvy7sbMOOT0"
});
var data = json.decode(response.body);
return DisplayModel.fromJson(data).results!;
} catch (exception) {
return [];
}
}
then use it like this:
Flexible(
child: FutureBuilder<List<Results>>(
future: Provider.of<DisplayController>(context).getDisplays(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Text('Loading....');
default:
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
List<Results> data = snapshot.data ?? [];
return GridView.count(
crossAxisCount: 3,
children: List.generate(
data.length,
(i) => DisplayCard(
displayName:
data[i].name as String,
displayImage: data[i]
.catalogs![i]
.image as String,
id: data[i].id as int)));
}
}
},
),
)