Reformat object data to an array

Queries and Resources
1

Hi

I am a bit stuck with reformatting tempState data back into an array to display it properly in a table.

My app setup is simply: A user can query our API for products, select one product from a table to add this product then to a "Selection table" on the right.

image
image1205×398 18.3 KB

I am using tempState to save each selection in chronological order. Here is the example for two entries:

image

I have used map() to structure the data into an array to display it properly in the right selection table. The only working version I managed so far is to access one single entry and to display it properly:

image
image945×217 17.8 KB

How can I iterate through each key of my tempState to display the two product of my example in my selection table? I have tried a FOR loop and different variants with MAP etc. somehow I have been running in circles for over 2h. Does anybody have a hint?

2

Back to the starting point. So pushing in tempState as an array into the table outputs the following:

image
image1086×452 49 KB

So the table shows me the those four values per cell in two columns, instead of mapping four values in four separate column with two rows. What am I missing here?

3

Ahh! I see. I was truly puzzled at how the table was displaying the data like that.

You have [{{stateProduct.value}}] in your data propertty. Get rid of the square brackets and make it {{stateProduct.value}}. I think you have that left over from your earlier attempt and this new method makes that unneeded.

4

Hi Mathews,

Thanks for the hint. That's what I thought too. However, retool claims its not an array of objects, and believe me I formatted this array every possible way.

image

Here is the output from the JSON editor of {{stateProduct.value}}

image

Trying to useformatDataAsArray() is just leaving me an empty array

image

What am I overlooking here? Probably its just a simple mistake ....

5

Ok, I figured it out:
The problem was that I initialized my tempState variable as an empty Object {}. It works now by simply switching it to an empty Array []. The saved data is now displayed correctly.

image

Anyhow, it would be interesting to know why formatDataAsArray() is not working in above problem setting, or how to reformat such data accordingly for future cases.

6

Glad you got it figure out!

The reason formatDataAsArray() did not work is it takes an "object of arrays" in this form:

{
  id: [1,2,3,4],
  value: ['value1','value2','value3','value4']
}

and turns it into and "array of objects":

[ 
  {id:1, value:'value1'}, 
  {id:2, value:'value2'}, 
  {id:4, value:'value3'}, 
  {id:1, value:'value4'}
]

Yours did not quite follow either pattern as there was no array.

And of course formatDataAsObect() does the opposite conversion.

Hope that clears it up!

3 Likes
7

Thanks. That clears it up indeed.