How to push edited format of JSON?

[david]

Hello.

In Supabase, I’m working with a JSON column that contains data structured as follows:

[
    {
        "name": "CEO",
        "value": 100
    },
    {
        "name": "CTO",
        "value": 95
    }
]

I need to develop a form that allows users to send data in this format to the Supabase database. Is it feasible to create a JSON object like this and add multiple objects to it? The number of objects might vary – sometimes there could be just one, other times as many as ten. Users should have the flexibility to decide the number of objects.

Could anyone provide some guidance on how to achieve this?

[Alexis]

Yes of course, you should be able to copy paste exactly what you wrote here inside the column binding (js or formula) and it should works

The method to generate it dynamically will vary depending of how what are the data you will use to generate the final Array or object.

You can also create it by using a workflow, you start with an empty array, you iterate on your items and add them inside the final array (the one that will be bound into the json column).

[david]

Thank you for the response. It’s great to know that this is achievable.

Suppose I have a single-select dropdown for the “name” field and a slider for the “value” field. If a user wants to create three objects(This is also a question, how he can define three objects only, maybe other user wants 2), how can I set up the front-end to allow the user to input these three custom objects?

I hope my question is clear.

[Alexis]

You need to have a global variable storing the array you’re editing.

You can repeat a flexbox as many time as you have items inside this variable.

You put the select and the slider inside the flexbox, so you will have one select and one slide repeated.

You can add an Add button before or after the repeated flexbox. You attach an on click workflow on the button. It will add an entry inside the array by using the change variable value action. You can push {name: null, value: 0} for example.

Once the new entry added it will show up in the repeated list with a select and a slider so you can configure it.

You can attach a change variable value action workflow on value change for both the select and the slider, and update the correct item inside the variable, you can choose to save inside supabase for every change too, you will have to use the update supabase action and bind the edited array variable to the JSON column.

[david]

@Alexis Thanks for your input.

I got everything, except for the way to add the flexbox input fields values (select + slider) to the array.
Don’t understand how I can find those values in the workflow and put them together…

I can’t even find select value, which is weird.

[Alexis]

It’s a nice start. What you need now is to select your select and your slider and add a workflow “on change” on both.

In this workflow you can add a change variable value action, select your ProfessionForm2 variable and choose to update by index.

You will have to set the new version of the item {name: 'Data Entry', value: 3}for a given index. Use the index from the repeat context available on the explorer when you build the formula.

This last formula will return your repeated data but with a given property updated with the value from the “on change” event. So for the select you will have to update the “name” property. For the slider you will have to update the “value” property.

[david]

@Alexis

Thanks. I think I got it, but unfortunately, I have a problem that I don’t understand.
Problem is, I can’t find the variable value for the select or the slider. Like it doesn’t exist. Maybe because of the flexbox and it generates afterwards? Really weird.

[Alexis]

Hi @david, sorry I was in vacation!

You can’t find the variables values because they are repeated, it’s why you should use the on change event to update your Form variable that will store it.

The value is inside Event.value (the yellow item bound in the formula from my screenshots)

[Frederik]

Hey @Alexis,

Thank you for the explanation! I had the same struggle!

One problem I’m still facing is that my JSON file is structured with a parent index, and I’m having trouble ensuring the path correctly references the parent index. Here’s the current structure:

[
{
“id”: 0,
“name”: “XXX”,
“children”: [
{
“id”: 0,
“name”: “Beispiel 1”
},
{
“id”: 1,
“name”: “Beispiel 2”
}
]
},
{
“id”: 1,
“name”: “Another Parent”,
“children”: [
{
“id”: 0,
“name”: “Beispiel 3”
},
{
“id”: 1,
“name”: “Beispiel 4”
}
]
}
]

How do I ensure that the path correctly references the parent index and its children when updating the variable?

Thanks!

[Alexis]

Hi, I’m not sure to understand, could you wrap your JSON with “```” so it display correctly in your post ?

Which part of the JSON do you want to update exactly on your workflow ?

[Frederik]

Hey @Alexis,

Sure, here is the JSON wrapped correctly for better readability:

[
  {
    "id": 0,
    "name": "Herzlich Willkommen",
    "children": [
      {
        "id": 0,
        "name": "Beispiel 1"
      },
      {
        "id": 1,
        "name": "Beispiel 2"
      }
    ]
  },
  {
    "id": 1,
    "name": "Another Parent",
    "children": [
      {
        "id": 0,
        "name": "Beispiel 3"
      },
      {
        "id": 1,
        "name": "Beispiel 4"
      }
    ]
  }
]

The problem I’m facing is ensuring the path correctly references the parent index and its children. Specifically, I want to update the name field of a particular child based on the parent index and the child index in my workflow.

[warnersmith]

Is that working well???

[Alexis]

I’m not sure it’s possible in nocode, but probably copilot can help you build the JS you need for this.

// create a copy
const json = JSON.parse(JSON.stringify(yourJsonVariable))
json[parentIndex].children[childrenIndex].name = yourNameVariable
return json

You can bind this inside the change variable value, to replace the whole JSON variable value with the children updated