Access field in graphQL array query dynamically

Question

I have the following return code

return (
  <FlatList
    data={data.groupQuery.entities}
    keyExtractor={(item, index) => index}
    renderItem={
      ({ item }) => {
        return (
          <View style={styles.container}>
            />
            <Text style={styles.label}>Name: {item.fieldName}</Text> // I want to display fieldName value here
          </View>
        )
      }
    }
  />
);

Given the above, how can I access the fieldName values from the query array in the photo. I want to call the field dynamically.

Updated query:

Apologies for some confusion to this thread. Now my goal is to access the fieldName value from the photo below. I tried {item.fieldTradingPlatform.entity.fieldName} but getting TypeError: Cannot read property 'fieldName' of undefined

Previous query:

With static call, I can output the value of first array:

console.log(data.groupQuery.entities[0].fieldName)

Is the above code not working? What behavior are you seeing? What behavior did you expect? Are you seeing any errors in the console? — Daniel Rearden
– Daniel Rearden, Commented Nov 2, 2018 at 4:15
I actually have 2 different queries... 1> without the integer array, and {item.fieldName} outputs the fieldName. 2> This updated version of my query. So I want to know how to dynamically call the values. — johntanquinco
– johntanquinco, Commented Nov 2, 2018 at 4:32
My concern is im not sure how to restructure the code so I can get both the [0] and [1] values from that query. Should we define an index value? Then how I can add this? — johntanquinco
– johntanquinco, Commented Nov 2, 2018 at 4:35
The FlatList component already dynamically creates a view for each item in the array of items you pass to the data prop. The value of each item is available inside the renderItem function. You're already dynamically rendering some views based on the passed-in array. If you have two items in your array, a separate view should be rendered for each of those items. — Daniel Rearden
– Daniel Rearden, Commented Nov 2, 2018 at 4:46
Again, it's not clear from your question and your comments what behavior you're expecting and what you're actually seeing when you run your code. What about your current code is not working as expected? — Daniel Rearden
– Daniel Rearden, Commented Nov 2, 2018 at 4:48

Asha · Accepted Answer · 2018-11-02 06:17:58Z

1

Graph Query Data

Try like this to access field name

renderItem={({ item }) => (
                    <View>
                        {
                            item.fieldTradingPlatform.map((a, i) => {
                                return <Text>{a.entity.fieldName}</Text>
                            })
                        }
                    </View>)}

fieldTradingPlatform is a array not a single object.

answered Nov 2, 2018 at 6:17

Asha

7601 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

johntanquinco Over a year ago

You are genius. Thank you so much!

johntanquinco Over a year ago

BTW, I get this warning in the app and console UI

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of CellRenderer. See https://fb.**/react-warning-keys for more information. in View (at PlatformComponent.js:74)

in line <View... of item.fieldTradingPlatform.map((a, i) => { return ( <View style={styles.container}>

Collectives™ on Stack Overflow

Access field in graphQL array query dynamically

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related