在Flutter中将JSON转换为ListView.builder

问题描述

我是编程的新手，请耐心等待，我正在尝试将此JSON转换为以这种设计显示，我已经完成了JSON解码，但是对于示例JSON，我了解了它的工作原理，但是对于复杂的JSON，我感到困惑，因此，如果有任何帮助，我真的很感谢

const { readFile } = require("fs/promises");
const fileName = "./utils/readme.txt";

const getMoviesData = () => {
  return readFile(fileName,"utf8");
};

module.exports = getMoviesData;

########################################### #####

What I want to display

########################################### #####

这是我想出的

[
  {
    "Category": "Gro","stores": [
      {
        "name": "market","logo_url": "https://www.google.com/signpost-150x150.png","phone_1": "1111111111","phone_2": "1111111111","location": "https://maps.google.com/location"
      },{
        "name": "mall","location": "https://maps.google.com/location"
      }
    ]
  },{
    "Category": "Food","stores": [
      {
        "name": "Food Time",{
        "name": "let's eat",{
    "Category": "Personal Care","stores": [
      {
        "name": "Body",{
        "name": "Hair","location": "https://maps.google.com/location"
      }
    ]
  }
]

但是我遇到了错误，我对如何显示类别下的商店感到困惑

谢谢您的帮助

解决方法

添加,第9行

"phone_2": "1111111111"

尝试我的代码

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: Test(),);
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: FutureBuilder(
        future: http.get('https://dc-apps.net/map/services.json'),builder: (context,snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          }
          List data = json.decode(snapshot.data.body);
          // print(data);
          List categoriesnames = [];
          List stores = [];
          data.forEach((element) {
            categoriesnames.add(element["Category"]);
            stores.add(element['stores']);
          });

          // return Text('see');
          return ListView.builder(
            itemCount: data.length,itemBuilder: (context,index) {
              //      print(stores[index][index]['name']);
              return CardItem(
                categoryname: categoriesnames[index],sotories: stores[index],);
            },);
        },);
  }
}

class CardItem extends StatelessWidget {
  final String categoryname;
  List sotories;
  CardItem({this.categoryname,this.sotories});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Expanded(
        child: Column(
          children: [
            Text(categoryname),SizedBox(
              height: 5,ListView.builder(
              scrollDirection: Axis.vertical,shrinkWrap: true,itemCount: sotories.length,index) => ListTile(
                title: Text(sotories[index]['name']),subtitle: Column(
                  children: [
                    Text(sotories[index]['phone_1']),Text(sotories[index]['phone_2']),],trailing: CircleAvatar(
                  radius: 50,backgroundImage: NetworkImage(sotories[index]['logo_url']),);
  }
}

android-listview json