使用 ListView.buider 从 json 中选取数据

Question

我创建了这个文件 json，我获取了“displayName”和“age”等数据，我还想在屏幕上看到来自子列表锻炼的数据。我该怎么做，如果可能的话，将这些数据放在个人资料页面中？这是我为我的小测试数据库制作的 Json 文件：

[
  {
    "displayName": "mario",
    "age": 27,
    "peso": 85,
    "altezza": 175,
    "workout": [
      {
        "nomeworkout": "Running"
      },
      {
        "nomeworkout": "Brucia Grassi"
      }
    ]
  },
  {
    "displayName": "jessica",
    "age": 28,
    "peso": 85,
    "altezza": 175,
    "workout": [
      {
        "nomeworkout": "Spinning"
      },
      {
        "nomeworkout": "Gambe"
      }
    ]
  },
  {
    "displayName": "Pedro",
    "age": 29,
    "peso": 85,
    "altezza": 175,
    "workout": [
      {
        "nomeworkout": "Potenziamento"
      }
    ]
  }
]

在这个页面上，我创建了一个简单的 ListView.builder 来显示项目列表，例如“displayName”、“age”、“weight”；但我不明白如何从内部“锻炼”列表中获取数据：

import 'dart:convert';
import 'package:fitness_app/trainerPage.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List data;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FutureBuilder(
          future:
              DefaultAssetBundle.of(context).loadString('assets/jsonDb.json'),
          builder: (context, snapshot) {
            var data = JsonDecoder().convert(snapshot.data.toString());
            return ListView.builder(
              itemCount: data == null ? 0 : data.length,
              itemBuilder: (context, index) {
                return InkWell(
                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => TrainerPage()));
                  },
                  child: Container(
                    padding: EdgeInsets.all(10),
                    child: Row(
                      children: <Widget>[
                        Text(data[index]['displayName']),
                        Text(data[index]['age'].toString()),
                      ],
                    ),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Answer 1

你可以像这样提取列表

var workouts = data[index]['workouts']

然后遍历该列表并呈现您的视图

Answer 2

简单的未来加载器json

Future loadJson()async => 
  [
    {
      "displayName": "mario",
      "age": 27,
      "peso": 85,
      "altezza": 175,
      "workout": [
        {
          "nomeworkout": "Running"
        },
        {
          "nomeworkout": "Brucia Grassi"
        }
      ]
    },
    {
      "displayName": "jessica",
      "age": 28,
      "peso": 85,
      "altezza": 175,
      "workout": [
        {
          "nomeworkout": "Spinning"
        },
        {
          "nomeworkout": "Gambe"
        }
      ]
    },
    {
      "displayName": "Pedro",
      "age": 29,
      "peso": 85,
      "altezza": 175,
      "workout": [
        {
          "nomeworkout": "Potenziamento"
        }
      ]
    }
  ];

简单查看

class ContohLoadJson extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: loadJson(),
        builder: (context, snapshot){
          List data = snapshot.data??[];
          return data.isEmpty?Center(child: CircularProgressIndicator(),):
          ListView(
            children: List.generate(data.length, (index) => 
              Card(
                child: Container(
                  padding: EdgeInsets.all(8),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Text("Name : "),
                          Text(data[index]['displayName'])
                        ],
                      ),
                      Row(
                        children: [
                          Text("Age : "),
                          Text(data[index]['age'].toString())
                        ],
                      ),
                      Row(
                        children: [
                          Text("Peso : "),
                          Text(data[index]['peso'].toString())
                        ],
                      ),
                      Row(
                        children: [
                          Text("altezza: "),
                          Text(data[index]['altezza'].toString())
                        ],
                      ),
                      Column(
                        children: List.generate(data[index]['workout'].length, (index2) => 
                          Card(
                            child: Container(
                              padding: EdgeInsets.all(8),
                              child: Column(
                                children: [
                                  Row(
                                    children: [
                                      Text("nomeworkout : "),
                                      Text(data[index]['workout'][index2]['nomeworkout'])
                                    ],
                                  )
                                ],
                              ),
                            ),
                          )
                        ).toList(),
                      )
                    ],
                  ),
                ),
              )
            ).toList(),
          );
        },
      )
    );
  }
}

使用 ListView.buider 从 json 中选取数据

Pick data from a json in flutter with ListView.buider

json

listview

flutter