ERROR in Chapter 27: Unhandled Exception: type 'Null' is not a subtype of type 'Iterable<dynamic>'

[pranjal-barnwal]

Error in Chapter 27 (HTTP | API | Networking | Badge) while Fetching data from the jsonbin.io API

Error: Unhandled Exception: type 'Null' is not a subtype of type 'Iterable'

Effect: Screen stuck in loading screen

[pranjal-barnwal]

Problem busted:

Our main json will be stored inside 'record'

Fix

We just basically need to access first ['records'] & then ['products'] inside it, instead of directly accessing ['products']

Fixed Working Code

  Future<void> loadData() async {
    await Future.delayed(Duration(seconds: 2));
    //? earlier local json data
    // final catalogJson = await rootBundle.loadString('assets/files/catalog.json');

    //? online fetched data
    final response = await http.get(Uri.parse(url));
    print(response);
    // final catalogJson = response.body;
    // final decodedData = jsonDecode(catalogJson); 

    final decodedData = json.decode(response.body);
    print("DECODED DATA: ");
    print(decodedData);

    //? converting from string to object
    var productsData = decodedData["record"]["products"]; 

    //?picking only products
    print(productsData);

    CatalogModel.items = List.from(productsData)
        .map<Item>((item) => Item.fromMap(item))
        .cast<Item>()
        .toList();
    setState(() {});

  }