Show json array field as comma separated values

[sitestreet]

I have a JSON field which stored days of the week. I want to show those in my list but it’s displaying them like this:

["Mon","Tue","Wed","Thu","Fri"]

I’m sure it must be easy to change this but cannot find how.

I want to have this:

Mon,Tue,Wed,Thu,Fri

Can anyone assist me please?

[Sorry_Duh]

How about something like this:

query.flatten('username').toString()

or using the .toString() on the bind that outputs ["Mon","Tue","Wed","Thu","Fri"]

It works with a query but I don’t currently have a JSON field to test that

Below is a output from a standard query and t is the set value with the flatten formatter and the to string maybe this helps if the same works for JSON fields?

"query": [
        {
            "username": "Tester"
        },
        {
            "username": "Development"
        },
        {
            "username": "AnotherDev"
        },
        {
            "username": "MoreDevs"
        },
        {
            "username": "MoreTest"
        },
        {
            "username": "Admin"
        }
    ],
    "t": "Tester,Development,AnotherDev,MoreDevs,MoreTest,Admin"

[tbvgl]

I have a formatter for this.

Place these in extensions/server_connect/formatters:
arrayconversion.zip (1.4 KB)

Then you get this option:

It converts for example ["Mon","Tue","Wed","Thu","Fri"] to Mon,Tue,Wed,Thu,Fri

[Sorry_Duh]

Doesn’t this just do the exact same as .toString() maybe I am misunderstanding?

sample_array has a value of ["Mon","Tue","Wed","Thu","Fri"] and to_string is just sample_array.toString()

Below is the browser output of this server action:

"sample_array": [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri"
    ],
    "to_string": "Mon,Tue,Wed,Thu,Fri"

[tbvgl]

Yeah, the same results in this case.

The toString() method converts an array into a string and separates the items by commas. It is straightforward and does not require any arguments.

The join() method, on the other hand, also converts an array into a string, but it allows you to specify the separator.

I created lots of formatters for arrays and used join to be more flexible. But in this case, it really doesn’t matter.

[Hyperbytes]

And dont forget explode() with splits the string into an array containing the separate elements

[sitestreet]

Thanks for all the responses. I’m afraid none of them are working.

If I do this:
planWeeklyDays.toString()
then it shows unchanged as this:
["Mon","Tue","Wed","Thu","Fri"]

@tbvgl, your extension looks perfect but where is extensions/server_connect/formatters?

[tbvgl]

@sitestreet you need to create the folders in your projects root directory

[sitestreet]

@tbvgl Aah, got you now. I’ve done that and it’s now showing the new formatters (nice work, I’ve not dabbled with custom extensions yet) but I’ve realised this is for NodeJS whereas this project is PHP.

I was hoping I could do the conversion on the client site (App Connect) but have now done it server-side (Server Connect) like this:

planWeeklyDays.replace('","', ',').replace('["','').replace('"]','')

It’s a bit of a long-winded way of doing it but it works.

[Hyperbytes]

Jon, what exactly is the JSON you are trying to process?

[sitestreet]

Hi Brian

It’s a longtext field in the database (set up as a JSON field in Data Manager) and stores the array like this:

["Mon","Tue","Wed","Thu","Fri"]

I feel like there should be a formatter in App Connect to change it to a standard comma-separated value but there doesn’t seem to be.

[Hyperbytes]

Ah, so it is not actually JSON, just text stored in a JSON field.
Probably need to go down the replace() as you specified or alternatively split() on “,” to create array then you could rebuild in a repeat or actually output in app connect in a repeat

[Cheese]

Have you tried doing it server side using the array list feature?

Working with Server Connect Array Lists

Intro The Server Connect Array List component allows you create and manipulate Array Lists easily with Server Connect actions. You can add items to an array, join multiple sources, remove and set arbitrary items, keep simple or complex objects or collections in an Array List. It’s also easy to use it as a string builder, when you need multi lines strings. Basics In order to be able to add items to an array you first need to define the array. The Array List actions are located in the Data Man…

We do this for comma separated columns to create lists of options related to reservations extras in our case.

Really simple and saves all that client side formatting.

In Server Connect we create our query which contains the comma separated values. Then we create a list with the Array component. We call this list in this example. And we pick our column from our initial query and split it.

Then we get the array values selecting the array we created above, list. And output it.

Client side we pick our Server Connect Action. In our circumstance we want to repeat a row containing a paragraph.

We then populate the data using the $value.

This then displays to the client side the following:

Am sure with a couple of tweaks on the above you could achieve what you are after @sitestreet.

Just throwing it out there.

This stemmed from an issue we had asked for help with:

Comma separated values in database to repeat?

Appreciate the help, I only get a infinite spinner displaying and can not select a value. Will try and split the data to an array server side. Cheers!

But the response to our question did not work so we sought an alternative route. Which is when we turned to using the Array features within Server Connect. We then figured it out, and have used this dozens of times now as we store more and more data in a comma separated format.

The Array side of Server Connect is so useful!! Really worth investigating. Like I said keep all that formatting server side and away from the client. Speeds up response especially if you are formatting lots of output to the browser side!

Man that sounds long-winded, but it really is not. A few minutes, and as I said maybe a slight adjustment to suit your requirements. Play around with it, am sure you’ll get there following this approach.

[sitestreet]

Thanks @Cheese. That’s a really good resource you’ve created. I’ve used the new array feature quite a few times, it’s a superb addition to Server Connect which has made things so much easier. I now realise the key is to do the formatting server-side rather than client-side which was what I had stuck in my thinking.

[Cheese]

@sitestreet

the key is to do the formatting server-side

Really speeds up the whole user experience and is far easier to manage. Personally I hate scruffy code on the client side and would rather hide it away on the back-end. Just output exactly what I want in the way I want it. I’ve no idea if what I suggest above will help with your situation but am sure with some tweaking it will achieve what you are after.