如何解析扑扑的JSON?

我想创建一个新闻应用程序,并且已将newsapi.org用作源。

我正在尝试获取Http库提供的JSON数据。

我在下面提供了完整的代码。

它没有给我任何错误,但是没有加载任何数据,当我打印数据时,它可以打印所有内容,但是我无法显示。

我不是问题所在,但是我所有的项目都已停止解决此问题。

我正在寻找此代码的解决方案,因为它不起作用。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:newly/services/networking.dart';
import 'package:newly/widgets/article.dart';

class NewsScreen extends StatefulWidget {
  @override
  _NewsScreenState createState() => _NewsScreenState();
}

class _NewsScreenState extends State<NewsScreen> {

  List<Article> articles = [];

  NetworkHelper networkHelper = NetworkHelper(
    url:
        'https://newsapi.org/v2/everything?q=bitcoin&apiKey=392495172bab4b3885ae93760df54b91',);

  Future<List<Widget>> getNews() async {
    var newsData = await networkHelper.getData();

    for (int i = 0; i < await newsData['articles'].length; i++) {
      var title = await newsData['articles'][i]['title'];
      var urlToImage = await newsData['articles'][i]['urlToImage'];
      var content = await newsData['articles'][i]['content'];
      var author = await newsData['articles'][i]['author'];
      var url = await newsData['articles'][i]['url'];

      print(title);
      print(urlToImage);
      print(url);
      print(content);
      print(author);
      print('123456789123456789123456789123456789');

      articles.add(
        Article(
          author: author,content: content,title: title,url: url,urlToImage: urlToImage,),);

      print(articles[0].author);

    }

    return articles;
  }

  Future<List<Article>> showArticles() async {
    var data = await get(
      'https://newsapi.org/v2/everything?q=bitcoin&apiKey=392495172bab4b3885ae93760df54b91',);

    var dataDecoded = await json.decode(data.body);

    List<Article> articles = [];

    await dataDecoded.forEach(
      (article) {
        articles.add(
          Article(
            author: article['author'],content: article['content'],title: article['title'],url: article['url'],urlToImage: article['urlToImage'],);
      },);

    return articles;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,centerTitle: true,title: Text(
          'Newly',style: TextStyle(
            color: Colors.white,body: FutureBuilder(
        future: getNews(),builder: (context,snapshot) {
          return ListView(
            children: articles,);
        },);
  }
}

网络助手:

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

class NetworkHelper {
  NetworkHelper({this.url});

  final String url;

  Future getData() async {
    http.Response response = await http.get(url);

    if (response.statusCode == 200) {
      String data = response.body;

      return json.decode(data);
    } else {
      print('something wrong');
      print(response.statusCode);
    }
  }
}
zzp0706034135 回答:如何解析扑扑的JSON?

在将文章添加到数组之前尝试设置状态

,

问题在于显示文章。就像@@ ISpam Ossama所说的那样,您必须使用setState这样将数据添加到列表中。

void getNews() async {
var newsData = await networkHelper.getData();

for (int i = 0; i < newsData['articles'].length; i++) {
  var title = newsData['articles'][i]['title'];
  var urlToImage = newsData['articles'][i]['urlToImage'];
  var content = newsData['articles'][i]['content'];
  var author = newsData['articles'][i]['author'];
  var url = newsData['articles'][i]['url'];

  print(title);
  print(urlToImage);
  print(url);
  print(content);
  print(author);
  print('123456789123456789123456789123456789');
  setState(() {
   articles.add(
    Article(
      author: author,content: content,title: title,url: url,urlToImage: urlToImage,),);
  });
  print(articles[0].author);
}
}

现在,您必须显示这样的文章。

ListView.builder(
          itemCount: articles.length,itemBuilder: (BuildContext ctxt,int index) {
            return Text(articles[index].title);
          },)

希望它将对您有帮助!

,

您也可以使用FutureBuilder进行此操作,如果您不希望这样做,因为@Mustafa回答会起作用。

Future<List<Article>> showArticles() async {
var data = await networkHelper.getData();

List<Article> articlesArr = [];

await data['articles'].forEach(
  (article) {
    articlesArr.add(
      Article(
        author: article['author'],content: article['content'],title: article['title'],url: article['url'],urlToImage: article['urlToImage'],);
  },);
return articlesArr;
}

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,centerTitle: true,title: Text(
          'Newly',style: TextStyle(
            color: Colors.white,body: FutureBuilder<List<Article>>(
        future: showArticles(),builder: (context,snapshot) {
          if (snapshot.hasData) {
            return ListView(
              children: snapshot.data.map((article) {
                return Container(
                  padding: EdgeInsets.all(8.0),child: Text(article.author),);
              }).toList(),);
          } else {
            return Container(
              color: Colors.blue,);
          }
        },);
  }
}
,

使用 json数据

好的做法是为此创建模型,然后通过api获取数据

创建模型和类很容易,不需要花力气,使您的工作变得轻松;)

用于为您的项目创建模型

访问 https://javiercbk.github.io/json_to_dart/

请参考下面的图片

enter image description here

只需复制json数据并粘贴到textField中,您只需单击一下即可准备好模型类

用于访问数据

Test _test = Test.fromJson(response.body);

就是这样。

本文链接:https://www.f2er.com/3161686.html

大家都在问