Parse Json in flutter with nested objects - json

Question

I am currently having issues when trying to print my Varients class (below) I do need to continue to add the nested objects later on but want to address this issue before I do.
So I can return response.body but when I print Varient.fromJson(i).varients I get Failed, no response.
JSON
{
"varients":[
{
"ProductId":"CMK8866",
"Colour":"Mid Blue Wash",
"Sizes":[
"4",
"6",
"8",
"10",
"12",
"14",
"16"
],
"image":"https://cdn-img.prettylittlething.com/2/5/2/4/252476b6dcf258958d52438b19b811d76da60dc0_CMK8866_1.jpg?imwidth=120",
"price":"28.00",
"name":"Mid Blue Wash Long Leg Straight Jeans",
"retailer":"prettylittlething"
},
{
"ProductId":"CMG0839",
"Colour":"Light Blue Wash",
"Sizes":[
"4",
"6",
"8",
"10",
"12",
"14",
"16"
],
"image":"https://cdn-img.prettylittlething.com/f/7/d/f/f7dfd26d523507c2f2e6697e408d932c8e0fac76_cmg0839_1.jpg?imwidth=120",
"price":"28.00",
"name":"Light Wash Long Leg Straight Jeans",
"retailer":"prettylittlething"
},
{
"ProductId":"CMQ3243",
"Colour":"Off White",
"Sizes":[
"4",
"6",
"8",
"10",
"12",
"14",
"16"
],
"image":"https://cdn-img.prettylittlething.com/d/9/0/2/d902d215e155a61d4cfc8999d714430f5fda01f9_CMK8867_1.jpg?imwidth=120",
"price":"28.00",
"name":"Off White Contrast Stitch Long Leg Straight Jeans",
"retailer":"prettylittlething"
},
{
"ProductId":"CMQ3245",
"Colour":"Stone",
"Sizes":[
"4",
"6",
"8",
"10",
"12",
"14",
"16"
],
"image":"https://cdn-img.prettylittlething.com/f/f/f/8/fff81a83fae46694dda3fcfef04d28508de64fdc_cmq3243_1.jpg?imwidth=120",
"price":"22.00",
"name":"Off White Long Leg Straight Jeans",
"retailer":"prettylittlething"
},
{
"ProductId":"CMQ3642",
"Colour":"Ecru",
"Sizes":[
"4",
"6",
"8",
"10",
"12",
"14",
"16"
],
"image":"https://cdn-img.prettylittlething.com/7/7/0/4/77046819c17f097804383b4fda0e0fda56b35239_cmq3245_1.jpg?imwidth=120",
"price":"28.00",
"name":"Stone Long Leg Straight Jeans",
"retailer":"prettylittlething"
},
{
"ProductId":"CMS6181",
"Colour":"Teal",
"Sizes":[
"4",
"6",
"8",
"10",
"12",
"14",
"16"
],
"image":"https://cdn-img.prettylittlething.com/0/6/0/7/0607455b765c3aed0356be8dafab301182919d2f_cmq3642_1.jpg?imwidth=120",
"price":"21.00",
"name":"Ecru With Contrast Stitch Long Leg Straight Jeans",
"retailer":"prettylittlething"
},
{
"ProductId":"CMS6180",
"Colour":"Chocolate",
"Sizes":[
"4",
"6",
"8",
"10",
"12",
"14",
"16"
],
"image":"https://cdn-img.prettylittlething.com/5/5/9/6/559602e94377d0ebbc5f222b30bbb96ec3104bf8_cms6181_1.jpg?imwidth=120",
"price":"25.00",
"name":"Teal Long Leg Straight Jean",
"retailer":"prettylittlething"
}
]
}
Code
Future<dynamic> requestProductMonitor() async {
final product_link = productIDEditingController.text;
var url = Uri.parse(
"http://5.226.139.20:8000/getvarient/?url=https://www.prettylittlething.com/mid-blue-wash-long-leg-straight-jeans.html");
http.Response response = await http.get(url);
try {
if (response.statusCode == 200) {
var jsonResponse = convert.jsonDecode(response.body);
print("this is the Json Response $jsonResponse");
setState(() {
for (Map<String, dynamic> i in jsonResponse) {
listModel1.add(Varient.fromJson(i));
//var test = Varient.fromJson(i).varients;
//print("This is the varients $test");
//product_size.add(User.fromJson(i).name);
}
});
showDropDown();
} else {
print("Error");
}
} catch (exp) {
print("Failed, no response");
}
}
This is my Varients class:
List<Varient> modelUserFromJson(String str) =>
List<Varient>.from(json.decode(str).map((x) => Varient.fromJson(x)));
String modelUserToJson(List<Varient> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class Varient {
String varients;
Varient({
required this.varients,
});
factory Varient.fromJson(Map<String, dynamic> json) => Varient(
varients: json["varients"],
);
Map<String, dynamic> toJson() => {
"varients": varients,
};
}
Wondering if anyone has any ideas ?

Answer 1

main.dart
import 'package:flutter/material.dart';
import 'dart:convert' as convert;
import 'package:http/http.dart' as http;
void main() {
runApp(
const MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()),
);
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
dynamic varient;
requestProductMonitor() async {
final response = await http.get(Uri.parse(
"http://5.226.139.20:8000/getvarient/?url=https://www.prettylittlething.com/mid-blue-wash-long-leg-straight-jeans.html"));
if (response.statusCode == 200) {
var jsonResponse = convert.jsonDecode(response.body);
varient = await jsonResponse["varients"];
} else {
print('Request failed with status: ${response.statusCode}.');
}
}
#override
void initState() {
requestProductMonitor();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: FutureBuilder(
future: requestProductMonitor(), // async work
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return const Text('Loading....');
default:
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return GridView.builder(
gridDelegate:
const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 350,
mainAxisSpacing: 1,
crossAxisSpacing: 10),
scrollDirection: Axis.vertical,
itemCount: varient.length,
itemBuilder: (BuildContext context, int index) {
List<String> sizes =
varient[index]["Sizes"].cast<String>();
return Wrap(
alignment: WrapAlignment.center,
children: [
Image.network(
varient[index]["image"],
fit: BoxFit.cover,
),
Text(varient[index]["name"]),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
sizes.isEmpty
? const Text("No Size Available")
: const Text("Available Sizes: "),
sizes.isNotEmpty
? DropdownButton<String>(
items: sizes.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Center(child: Text(value)),
);
}).toList(),
onChanged: (_) {},
)
: const SizedBox(),
],
)
],
);
});
}
}
},
),
));
}
}
This is your desired output, the sizes are now shown in a drop-down menu and can read data from the JSON to get name and image.