search

FlutterFlow / flutterflow-issues

A community issue tracker for FlutterFlow.
124 stars 23 forks source link

JSON Path issue in ListView #1587

Closed nitin-anantpranali closed 1 year ago

nitin-anantpranali commented 1 year ago

Has your issue been reported?

Current Behavior

Hi,

I am using a ListView and using API call to load the List. In the ListView there are multiple fields which I want to fetch from the API Response.

In Generate Dynamic Children in List View, I have attached JSON Body. And in the separate children, I am assigning the JSON Path as $.items[:].sCityName.

But it generates error. Where I am going wrong?

My JSON Response is as follows { "page": 1, "perPage": 30, "totalItems": 2, "totalPages": 1, "items": [ { "id": 1, "collectionName": "Cities", "sCityName": "ABC", "sPinCode": "101010" }, { "collectionName": "Cities", "id": 2, "sCityName": "PQR", "sPinCode": "121212" } ] }

Expected Behavior

As mentioned in the Video, the JSON Path should work as

$.items[:].sCityName

Steps to Reproduce

  1. Create Page (I have selected List Page with multiple fields in List Childs)
  2. Assign API Call in Backend Query to ListView
  3. Generate Dynamic Children = JSON Body
  4. First Text Field in ListView, Assign Text property to JSON Path as $.items[:].sCityName
  5. Second Text Field in ListView, Assign Text property to JSON Path as $.items[:].sPinCode

Reproducible from Blank

Bug Report Code (Required)

ITFXi/Ll5YphosxE1c7XbsFVuCIwGUwCaI0z0tlETRQdfuPyPZkyPs/OZVpCcuqHeW5heVf+8TsewaHvkofhOMYDIS6BbLZjwZFXUxDhZHy6eK6MCbuwe0B7O8dPf1SG0p+7giMmPu9Zc3gCwFyhe9yAb3qCf9qOYwx5e6fDbOY=

Context

Can't run the App

Visual documentation

image

image

Additional Info

No response

Environment

- FlutterFlow version: 4.0
- Platform:
- Browser name and version:
- Operating system and version affected:
hariprasadms commented 1 year ago

Hi @nitin-anantpranali - Thanks for submitting the issue. I looked at your project. I see the Api end point you are showing above works fine in test but not in run mode. Can you see what error you see in browser console when you navigate to the page. I think, the network is blocking the api response due to CORS error. This can happen when the api is private and it expects a proxy.

Also, check what response your get when you request the same api in postman.

nitin-anantpranali commented 1 year ago

When I transfer to the page, I get this response.

match-pattern.js:1 Uncaught SyntaxError: Identifier 'MATCH_PATTERN_REGEXP' has already been declared (at match-pattern.js:1:1) helper.js:1 Uncaught SyntaxError: Identifier 'DEFAULT_OPTIONS' has already been declared (at helper.js:1:1) \dart_sdk.js:30369 ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ dart_sdk.js:30369 The following NoSuchMethodError was thrown building Builder(dirty): dart_sdk.js:30369 'toList' dart_sdk.js:30369 Dynamic call of null. dart_sdk.js:30369 Receiver: Instance of '_JsonMap' dart_sdk.js:30369 Arguments: [] dart_sdk.js:30369 dart_sdk.js:30369 The relevant error-causing widget was: dart_sdk.js:30369 Builder dart_sdk.js:30369 Builder:file:///tmp/ff_service_scratch/tVhHrpOoqedlVw6uIhru/main10/lib/pages/city/city_list/city_list_widget.dart:113:28 dart_sdk.js:30369 dart_sdk.js:30369 When the exception was thrown, this was the stack: dart_sdk.js:30369 dart:sdkinternal 5463:11 throw dart_sdk.js:30369 dart:sdk_internal 5894:15 defaultNoSuchMethod dart_sdk.js:30369 dart:sdk_internal 7191:19 noSuchMethod dart_sdk.js:30369 dart:sdk_internal 5891:30 noSuchMethod dart_sdk.js:30369 dart:sdk_internal 5627:19 callNSM dart_sdk.js:30369 dart:sdk_internal 5629:27 _checkAndCall dart_sdk.js:30369 dart:sdk_internal 5709:17 callMethod dart_sdk.js:30369 dart:sdk_internal 5712:17 dsend dart_sdk.js:30369 packages/main10/pages/user/edit_user/edit_user_model.dart.js 10586:48 dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 195125:19 build dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 184669:56 build dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 138554:22 performRebuild dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 50031:14 rebuild dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 138545:12 [_firstBuild] dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 138541:28 mount dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 49634:18 inflateWidget dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 49475:27 updateChild dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 138576:34 performRebuild dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 184730:13 performRebuild dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 50031:14 rebuild dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 184156:21 buildScope dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 189240:43 drawFrame dart_sdk.js:30369 packages/flutter/src/widgets/unique_widget.dart.js 93721:12 [_handlePersistentFrameCallback] dart_sdk.js:30369 packages/flutter/src/scheduler/binding.dart.js 862:9 [_invokeFrameCallback] dart_sdk.js:30369 packages/flutter/src/scheduler/binding.dart.js 830:37 handleDrawFrame dart_sdk.js:30369 packages/flutter/src/scheduler/binding.dart.js 749:12 [_handleDrawFrame] dart_sdk.js:30369 dart:sdk_internal 207076:7 invoke dart_sdk.js:30369 dart:sdk_internal 176995:15 invokeOnDrawFrame dart_sdk.js:30369 dart:sdk_internal 206783:57 dart_sdk.js:30369 dart:sdk_internal 5666:16 _checkAndCall dart_sdk.js:30369 dart:sdk_internal 5671:17 dcall dart_sdk.js:30369 dart:sdk_internal 63548:21 ret dart_sdk.js:30369 dart_sdk.js:30369 ════════════════════════════════════════════════════════════════════════════════════════════════════

Also in Postman I get proper reply from API as

{ "page": 1, "perPage": 30, "totalItems": 2, "totalPages": 1, "items": [ { "collectionId": "giqtt8yfkfhtiqr", "collectionName": "Cities", "created": "2023-10-04 04:47:51.852Z", "id": "ldkldve5cslu055", "sCityName": "Loni", "sPinCode": "413713", "updated": "2023-10-04 04:47:51.852Z" }, { "collectionId": "giqtt8yfkfhtiqr", "collectionName": "Cities", "created": "2023-10-04 04:48:05.824Z", "id": "mo4y3grz9y94ue7", "sCityName": "Rajgurunagar", "sPinCode": "410505", "updated": "2023-10-04 04:48:05.824Z" } ] }

nitin-anantpranali commented 1 year ago

Also, I have tested with multiple Endpoints like Supabase, PB etc...

hariprasadms commented 1 year ago

Hi, There is a wrong in your api query configurations on the page. Hence you are seeing the issue. Follow configurations as below,

Cities/records, endpoint is not returning list of objects. Items property is the list you should access to get the list of cities.

image image