在flutter中获取JSON数据返回NULL

Posted 2023-02-23

【中文标题】在flutter中获取JSON数据返回NULL

【英文标题】：Fetching JSON data in flutter returns NULL

【发布时间】：2020-07-18 19:26:51

【问题描述】：

我是 Flutter 的新手，并试图从托管的 php 文件中获取数据。无论我尝试什么，结果都会返回 NULL。我想输出 php 文件中的所有数据，而不仅仅是一行。在 PHP 上，我只会做一个 for 循环来获取所有 JSON 数据。我将如何在 Dart 中做到这一点？

我的 PHP 文件 -

$sql = "SELECT * FROM user_log";
$result = $conn->query($sql);
if ($result->num_rows > 0) 
    $rows = array();
        while($r = $result->fetch_assoc()) 
        $rows[] = $r;
        
        $newArray = array_values($rows);
    
$json_string = json_encode($newArray, true);

echo $json_string;

飞镖代码 -

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

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget 
   @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
    String name, team;


FetchJSON() async 
    var url = 'https://vettx.app/api/get.php';
    http.Response response = await http.get(url);
    var data = jsonDecode(response.body);
    name = data['0']['user'];
    team = data['0']['team'];
    //print(data.toString());


void initState() 
    super.initState();
    FetchJSON();


Widget MyUI() 
  return new Container(
      child: new ListView(
        children: <Widget>[
        new Text(
           'Name : $name',
        ),
        new Text(
          'Team : $team',
        ),
      ],
    ),
  );



@override
Widget build(BuildContext context) 
  return new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text('Get Data'),
      ),
      body: isData
          ? new Center(
        child: new CircularProgressIndicator(),
      )
          : MyUI(),
     ),
   );
  

JSON 数据 -

    "id": "4037",
    "user_id": "1",
    "user": "Ryan Dietz",
    "team": "Manager",
    "action": "email",
    "veh_id": "73366",
    "user_notes": "I am wondering if you have the VIN by chance?",
    "time_stamp": "2020-03-26 20:27:07"
,

链接到 JSON 示例 -

https://vettx.app/api/get.php

【问题讨论】：

您的 json 未返回列表，因此请尝试使用 data['user] 访问用户。

是的，不走运，如果您查看示例 php 链接，json 数据的父级别为 [0]

http.get(url).then((response) var data = jsonDecode(response.body); name = data['0']['user']; team = data[' 0']['团队']; );试试这个

如果我 print(data.toString()); 仍然返回 NULL；它将所有数据输出到日志中，这真的让我感到困惑，为什么它将 NULL 返回到屏幕。

从零附近删除单引号 (')。数据[0]['用户']

【参考方案1】：

您的服务器返回一个对象数组，因此您需要解析 json 并将其存储在一个数组中。此外，要获得第 0 个索引，您需要编写 array[0]，而不是 array['0']。

您必须从 fetchJSON 方法返回整个数组，而不是存储第一个对象属性：

Future<List> fetchJSON() async 
   var url = 'https://vettx.app/api/get.php';
   http.Response response = await http.get(url);
   var data = jsonDecode(response.body);
   return data;

使用FutureBuilder 小部件来处理数据的加载和显示，如下所示：

@override
Widget build(BuildContext context) 
  return new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text('Get Data'),
      ),
      body: FutureBuilder<List>(
        future: fetchJSON(),
        builder: (context, snapshot) 
          if (snapshot.connectionState == ConnectionState.done) 
            if (snapshot.hasData) 
              // Success case
              return ListView.builder(
                itemBuilder: (context, index) 
                  return ListTile(
                    title: Text(snapshot.data[index]['user']),
                    subtitle: Text(snapshot.data[index]['team']),
                    trailing: Text(snapshot.data[index]['id']),
                  );
                ,
                itemCount: snapshot.data.length,
              );
            
            // Error case
            return Text('Something went wrong');
           else 
            // Loading data
            return Center(
              child: CircularProgressIndicator(),
            );
          
        ,
      ),
    ),
  );

在上面的代码中，snapshot.data 是一个对象列表，你可以使用 itemBuilder 的索引值来循环遍历它。

最终的输出会是这样的：