Pass data from query into a custom component

Queries and Resources
1

I'm trying to pass the results of query5.data as data (array of objects) to my component js library (ag-grid.js)

If I hard code some data it works as expected. I don't understand how bring the results into the component

I'm setting Model to:

{{formatDataAsArray(query.data)}}

It shows a valid structure in the green window. This should be the data for my js library element to use as it's data to process.

In my code I'm using

var rowData = {{model.value}}
console.log(rowData) // returns undefined
apiGrid.options:(
 rowdata:rowData
} // not working

My js library will process a valid array so I don't need to iterate (foreach or .map).

What am I doing wrong?

2

Hi @doghousedev! Are you able to pass your data down as {{query5.data}} instead of {{formatDataAsArray(query.data)}} since query5.data is already an array?

3

Hi @Kenny , I am having the same problem. My custom component works well with hard coded array. however when I push in with model it does not seem to work. Just like @doghousedev in the green window my array looks fine.

many thanks for any help.

I am trying to graph a node-edge diagram with my data in retool.

4

@alperugr, could you share a screenshot of your current setup with your array with us? Also, are there any indications you can share that tells us that your array isn't "working" in your custom component? Having a screenshot/recording can help everyone in the community to understand what you're experiencing. :slightly_smiling_face:

5

Hi all,

I also have a problem with getting query data to the custom component model, and as this here was the last unsolved post I found about this topic, I will follow up here :slight_smile:

In my app I created a custom component showing a tree, the data for the tree will be injected into the custom component by using the model, and the tree data there is collected by a JS query. My JS query runs fine and produces the expected output. It's an array of 50 elements, each containing a map of 2 elements:
image

In my custom component model field, I can see the content of JS query result, and also there it looks like expected:
image

But now when I look at the whole model object, the array contains 50 elements, but the internal maps are empty:
image

That is also what I see in the custom component, it will just show no data inside the tree.

Is my undestanding of the data injection into the model wrong or is there an obvious error somewhere in my usage?

Thanks and regards,
Andreas

6

That's strange....just tested this out on my end and it seems to be evaluating correctly :thinking: .

Are you able to try opening your app in incognito tab and see if it's showing up correctly?

7

Could this issue be related to how the model is passed into the custom component?

This one mentions passing the model into the component and the rendering is wrapped. Hope this helps...