Flutter Nested array? - json

Question

I have these JSON data
[
{
"student_id": 1,
"studentid": 1204,
"password": "demo",
"name": "Amber",
"level": "student",
"course_name": [
"Math",
"History"
]
}
]
Kindly show me the code to to achieve this :

Answer 1

Actually you have a JSON array (only one index), should be something like:
myArray[0].course_name.forEach(course => console.log(course));

Answer 2

data[index].courseName[0]
https://app.quicktype.io/ for right "model"
model.dart
// To parse this JSON data, do
//
// final welcome = welcomeFromJson(jsonString);
import 'dart:convert';
List<Welcome> welcomeFromJson(String str) => List<Welcome>.from(json.decode(str).map((x) => Welcome.fromJson(x)));
String welcomeToJson(List<Welcome> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class Welcome {
int studentId;
int studentid;
String password;
String name;
String level;
List<String> courseName;
Welcome({
this.studentId,
this.studentid,
this.password,
this.name,
this.level,
this.courseName,
});
factory Welcome.fromJson(Map<String, dynamic> json) => Welcome(
studentId: json["student_id"] == null ? null : json["student_id"],
studentid: json["studentid"] == null ? null : json["studentid"],
password: json["password"] == null ? null : json["password"],
name: json["name"] == null ? null : json["name"],
level: json["level"] == null ? null : json["level"],
courseName: json["course_name"] == null ? null : List<String>.from(json["course_name"].map((x) => x)),
);
Map<String, dynamic> toJson() => {
"student_id": studentId == null ? null : studentId,
"studentid": studentid == null ? null : studentid,
"password": password == null ? null : password,
"name": name == null ? null : name,
"level": level == null ? null : level,
"course_name": courseName == null ? null : List<dynamic>.from(courseName.map((x) => x)),
};
}
main.dart
var jsonString = [
{
"student_id": 1,
"studentid": 1204,
"password": "demo",
"name": "Amber",
"level": "student",
"course_name": ["Math", "History"]
}
];
List<Welcome> hui = welcomeFromJson(json.encode(jsonString));
print(hui[0].courseName[0]);

Answer 3

Try this now
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(new MaterialApp(
home: new HomePage(),
));
}
class HomePage extends StatefulWidget {
#override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
List data;
bool isLoading = false;
Future<String> getData({isShowLoading: true}) async {
// refreshKey.currentState?.show(atTop: false);
//await Future.delayed(Duration(seconds: 2));
if (isShowLoading) {
setState(() {
isLoading = true;
});
}
var response = await http.get(
Uri.encodeFull("https://ikns.info/api/nested-array.php"),
headers: {"Accept": "application/json"});
if (response.statusCode == 200) {
if (isShowLoading) {
setState(() {
isLoading = false;
});
}
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
if (mounted) {
setState(() {
data = jsonDecode(response.body);
});
}
return "Success!";
}
var refreshKey = GlobalKey<RefreshIndicatorState>();
#override
void initState() {
super.initState();
this.getData();
}
Future<Null> _onRefresh() async {
await getData(isShowLoading: false);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Parsing List of Strings"),
),
body: isLoading
? Center(
child: Text('Loading...'),
)
: RefreshIndicator(
key: refreshKey,
child: new ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
List<dynamic> items = data[index]["course_name"];
return GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => DetailsPage(
todo: Todo.fromJson(data[index]),
),
),
);
},
child: new Card(
child: Column(
children: <Widget>[
Container(
child: new Text(data[index]["name"]),
),
Column(
children: List.generate(items.length, (index) {
return Text(
"${items[index]}",
style: TextStyle(color: Colors.red),
);
}),
),
],
),
),
);
},
),
onRefresh: _onRefresh,
),
);
}
}
class Todo {
final String name;
Todo(this.name);
Todo.fromJson(Map<String, dynamic> json) : name = json['name'];
}
class DetailsPage extends StatelessWidget {
final Todo todo;
DetailsPage({Key key, #required this.todo}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text(todo.name),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text(todo.name),
),
);
}
}
UPDATE
OnClick Math, pass Math to the other screen (same for history)
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(new MaterialApp(
home: new HomePage(),
));
}
class HomePage extends StatefulWidget {
#override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
List data;
bool isLoading = false;
Future<String> getData({isShowLoading: true}) async {
// refreshKey.currentState?.show(atTop: false);
//await Future.delayed(Duration(seconds: 2));
if (isShowLoading) {
setState(() {
isLoading = true;
});
}
var response = await http.get(
Uri.encodeFull("https://ikns.info/api/nested-array.php"),
headers: {"Accept": "application/json"});
if (response.statusCode == 200) {
if (isShowLoading) {
setState(() {
isLoading = false;
});
}
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
if (mounted) {
setState(() {
data = jsonDecode(response.body);
});
}
return "Success!";
}
var refreshKey = GlobalKey<RefreshIndicatorState>();
#override
void initState() {
super.initState();
this.getData();
}
Future<Null> _onRefresh() async {
await getData(isShowLoading: false);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Parsing List of Strings"),
),
body: isLoading
? Center(
child: Text('Loading...'),
)
: RefreshIndicator(
key: refreshKey,
child: new ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index) {
List<dynamic> items = data[index]["course_name"];
return new Card(
child: Column(
children: <Widget>[
Container(
child: new Text(data[index]["name"]),
),
Column(
children: List.generate(items.length, (index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => DetailsPage(
todo: Todo(items[index].toString()),
),
),
);
},
child: Text(
"${items[index]}",
style: TextStyle(color: Colors.red),
),
);
}),
),
],
),
);
},
),
onRefresh: _onRefresh,
),
);
}
}
class Todo {
final String name;
Todo(this.name);
Todo.fromJson(Map<String, dynamic> json) : name = json['name'];
}
class DetailsPage extends StatelessWidget {
final Todo todo;
DetailsPage({Key key, #required this.todo}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text(todo.name),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text(todo.name),
),
);
}
}