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

Posted 2023-02-23

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

【英文标题】：Display list of only product names in flutter, using woocommerce api data in json format

【发布时间】：2020-04-12 07:12:58

【问题描述】：

我能够在控制台中以 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, 

【问题讨论】：

您能否添加一个示例来说明您的响应数据是什么样的？

我已经更新了我在控制台中看到的响应。

【参考方案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());
          
        );
  

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

【参考方案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
      );

【参考方案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);