Flutter newbie - 使用 http 从 JSON 文件中获取数据

Question

我是这个 http 和 JSON 世界的新手，所以我在陈述或命名某些术语时可能是错误的。我正在从 Udemy 获得一门课程，我正在尝试获取特定对象或该对象的属性。但无论我做什么，我仍在获取所有数据，而不是索引。

这是我的代码：

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

class JsonParsingSimple extends StatefulWidget {

  @override
  _JsonParsingSimpleState createState() => _JsonParsingSimpleState();
}

class _JsonParsingSimpleState extends State<JsonParsingSimple> {
  Future data;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    data = getData();
  }

{...}

  Future getData() async
  {
    Future data;
    String url = "https://jsonplaceholder.typicode.com/posts";
    Network network = Network(url);

    data = network.fetchData();
    data.then((value)
    {
      print(value[0]['title']); //this line still brings me every data like i'm writing *(value)*
    });
    
    return data; 
  }
}

class Network
{
  final String url;
  Network(this.url);

  Future fetchData() async
  {
    print("$url");
    Response response = await get(Uri.parse(url));

    if(response.statusCode == 200)
    {
      print(response.body);
      return json.decode(response.body); 
    }
    else
    {
      print(response.statusCode);
    }
  }
  
}

print(value) 或 print(value[0]) 或 print(value[0]['id'])。他们都给了同样的东西。获取所有内容。

Answer 1

https://jsonplaceholder.typicode.com/posts，提供一个 JSON 对象的列表，所以基本上，我们首先需要解析它们，下面的例子展示了如何创建一个对象并将其解析为列表。

import 'dart:convert';

import 'package:http/http.dart' as http;

void main() async {
  String url =
      "https://jsonplaceholder.typicode.com/posts";
  final response = await http.get(Uri.parse(url));
  List<JsonData> list = [];
  for(var data in jsonDecode(response.body) as List) {
    list.add(JsonData.fromJson(data));
  }
  print(list[0].id); // Pass the index to get specific values from model
}

class JsonData {
  int? userId;
  int? id;
  String? title;
  String? body;

  JsonData({this.userId, this.id, this.title, this.body});

  JsonData.fromJson(Map<String, dynamic> json) {
    userId = json['userId'];
    id = json['id'];
    title = json['title'];
    body = json['body'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['userId'] = this.userId;
    data['id'] = this.id;
    data['title'] = this.title;
    data['body'] = this.body;
    return data;
  }
}

Answer 2

最基本的方法是导入dart:convert library；

例如，您有类似的数据

{
  "student": {
      "name": "Robin",
      "subject": "computer"
   }
}

import 'dart:convert';

Map<String, dynamic> user = jsonDecode(jsonString);
var name = user['student']['name'];

对于简单的数据，上述方法是正确的，但对于更复杂的数据，我建议使用包或检查下面给出的

您可以通过选择语言作为 dart 来使用此 https://app.quicktype.io/。
用于将复杂的 JSON 数据转换为 dart 对象。然后使用这些对象来获得你想要的特定值

// To parse this JSON data, do
//
//     final welcome = welcomeFromJson(jsonString);

import 'dart:convert';

class Welcome {
    Welcome({
        this.student,
    });

    Student student;

    factory Welcome.fromRawJson(String str) => Welcome.fromJson(json.decode(str));

    String toRawJson() => json.encode(toJson());

    factory Welcome.fromJson(Map<String, dynamic> json) => Welcome(
        student: Student.fromJson(json["student"]),
    );

    Map<String, dynamic> toJson() => {
        "student": student.toJson(),
    };
}

class Student {
    Student({
        this.name,
        this.subject,
    });

    String name;
    String subject;

    factory Student.fromRawJson(String str) => Student.fromJson(json.decode(str));

    String toRawJson() => json.encode(toJson());

    factory Student.fromJson(Map<String, dynamic> json) => Student(
        name: json["name"],
        subject: json["subject"],
    );

    Map<String, dynamic> toJson() => {
        "name": name,
        "subject": subject,
    };
}

如果您需要通过 API 发送，上述代码可帮助您将 JSON 数据转换为对象，反之亦然