在颤振中显示仅产品名称的列表，使用json格式的woocommerce api数据

Question

我能够在控制台中以 json 格式获取和打印数据，并且能够在颤振应用程序中以列表格式显示整个数据体。但我不知道如何在列表中仅显示特定键及其值。它的地图列表。我已经从这段代码中删除了消费者密钥和秘密。

import 'dart:async';
import 'dart:convert';

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

void main(){
  runApp(MaterialApp(
    home: CustomHome(),
  ));
}

class CustomHome extends StatefulWidget {
  @override
  _CustomHomeState createState() => _CustomHomeState();
}

class _CustomHomeState extends State<CustomHome> {

  List data;

  Future<String> getData() async{
    var response = await http.get('https://jbaat.com/wp-json/wc/v3/products/?consumer_key=&consumer_secret=');

    setState(() {
      var converted = jsonDecode(response.body);
      data = converted;
    });
  }


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

  @override
  Widget build(BuildContext context) {
    print(data);
    return Scaffold(
      body: ListView.builder(
          itemCount: data == null ? 0 : data.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('$data'),
                ),
              ),
            );
          }),
    );
  }
}

下面是回复

 [{id: 493, name: Bas 5 Min White Half Sleeve T-Shirt, slug: bas-5-min-white-half-sleeve-t-shirt, permalink: https://www.jbaat.com/product/bas-5-min-white-half-sleeve-t-shirt/, date_created: 2019-12-14T23:39:08, date_created_gmt: 2019-12-14T18:09:08, date_modified: 2019-12-14T23:48:01, date_modified_gmt: 2019-12-14T18:18:01, type: variable, status: publish, featured: false, catalog_visibility: visible, description: , short_description: , sku: , price: 500.00, regular_price: , sale_price: , date_on_sale_from: null, date_on_sale_from_gmt: null, date_on_sale_to: null, date_on_sale_to_gmt: null, price_html: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#8377;</span>500.00</span>, on_sale: false, purchasable: true, total_sales: 0, virtual: false, downloadable: false, downloads: [], download_limit: -1, download_expiry: -1, external_url: , button_text: , tax_status: taxable, tax_class: , manage_stock: false, stock_quantity: null, stock_status: instock, backorders: no, 

Answer 1

Jbaat，我建议为您的响应数据创建一个模型，并相应地使用每个项目实例中的值。很少有在线转换器可以将您的 json 响应转换为 Dart 模型，这里有一个 - https://javiercbk.github.io/json_to_dart/。下面是一个基于您的响应数据的快速示例，

class Items {
  final List<Items> items;

  Items({this.items});

  factory Items.fromJson(List<dynamic> json) {
    List<Items> itemList = json.map((i) => Items.fromJson(i)).toList();

    return Items(
        items: itemList
    );
  }
}

class Item {
  final int id;
  final String name;
  ......

  Item({this.id, this.name,.....});

  factory Item.fromJson(Map<String, dynamic> json) {
    return Item(
        id: json['id'],
        name: json['name']
        ......
    );
  }
}

然后你的getData() 会是，

Future<Items> getData() async{
  var response = await http.get('https://jbaat.com/wp-json/wc/v3/products/?consumer_key=&consumer_secret=');

  return Items.fromJson(json.decode(response.body)).items;
}

您现在应该拥有Item 列表，可用于获取特定项目信息。您还应该使用FutureBuilder 调用您的getData() 而不是在initState 中调用它，以确保在构建这样的小部件之前数据可用，

@override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: getData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Scaffold(
              body: ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    Item item = snapshot.data[index]; //Your item
                    return Container(
                      child: Card(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(item.name),
                        ),
                      ),
                    );
                  }),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        });
  }

希望这会有所帮助。祝你好运！

Answer 2

将data的类型改为

List<Map<String,dynamic>> 

您的用例的可能实现：

Map y;
var keytobesearched='name';
List<Map<String,dynamic>> x= [{'id': 493, 'name': 'Bas 5 Min White Half Sleeve T-Shirt', 'slug': 'bas-5-min-white-half-sleeve-t-shirt'}];

      x.forEach((Map<String,dynamic> ele){
        if(ele.containsKey(keytobesearched))
           y=Map.from(ele);
        // display/alter y to your liking
      });

Answer 3

如果您想要一个完整的即插即用 Woocommerce Sdk 来为您处理身份验证、产品、客户、运输等，您可以在 https://pub.dev/packages/woocommerce 使用 Woo Commerce SDK 库进行颤振

Woocommerce myWoocommerce = WooCommerce(baseUrl: yourBaseUrl, consumerKey: yourConsumerKey, consumerSecret: consumerSecret);

然后简单地获取您的列表，例如：

WooProduct products = await myWocommerce.getProducts(); // returns the ist of products.

for (var product in products){ print(product.name)};