Problems creating and retrieving data from database JSON array fields

[IdrisE]

How’s it going guys!
I need some help getting my data source for a dynamic slider right. (v4.2.1, NodeJs)

I tried creating a json ‘array’ field in my db to store an array of image links, but on saving the field, it reverts to a json object field. Manually changing the json data type after saving seems to work, but applying database changes says – ‘Nothing to do!’, and the field is still returned as an object in app connect.

Anyway, I saw something about jsonb on here, and figured I’d try it out.
Weirdly, changing my json field to jsonb array, resulted in a ‘json array’ (on both server and app connect).

But setting it as a source for my swiper still comes out blank. This is what the data looks like:

Anyone else notice/dealt with this?
Any help would be appreciated.

Thanks a lot.
@Teodor @George

[IdrisE]

Any help on this guys?
@Teodor @George

[patrick]

What I see on the screenshot is a json string, you need to parse that first to get an actual array. Which database do you use to store the json array?

[IdrisE]

Hey @patrick,
Thanks for the response.
It’s been driving me crazy.

I’m using SQLIte for development.
How do I go about that…Parsing?
Because what I did earlier was save the json array returned by an api straight to the DB, and it came out that way.

Thanks again Patrick.

[patrick]

It looks like it is stored as a string, not sure about the driver of sqlite supports json properly, normally it should then parse the string back to an object for you.

Add the following code in a script block or in a js file to your page.

dmx.Formatter('string', 'parseJSON', function(str) {
  return JSON.parse(str)
});

Then in your expression for the gallery use it like serverconnect1.gallery.parseJSON(). This will parse the json and return the actual array.

[IdrisE]

Thanks a lot Patrick!
You rock man! It worked

Yeah, the sqlite support probably needs more work.
Thanks again.

[Robert_LM]

@patrick
Gentlemen,
I’m confused.
Please see my live link here: http://137.184.106.209/test

1. so does the database field datatype in DBManager need to be JSON or JSONB ? or can it still be Text after Patrick’s function is in play?

2. I have a MSSQL field that contains this data for filenames:
   ['https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/Anglia-Lakeland-2017-2.jpg','https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/Anglia-Bloomin-Arts-2020.jpg','https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/Anglia-gators.jpg','https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/Anglia-interior-2019.jpg']

So you’re saying that this isn’t valid input for these components? If its not a single path, then it needs to be a JSON array?
So I tried using the function and swiper doesn’t display.
You can view the source to see the Parse function:

3. I’m unclear how to get this to work with swiper. My code:
   
   

On the live page, you can see that if I replace this “array and function” with a single field that contains an image path, then the Swiper works with that image.
So either my function isn’t installed correctly or I don’t have the syntax correct, or my image pathing text is wrong in the database field.

Thx!

[bpj]

Your function is probably right but it’s designed to parse a json string and return an array - this is several filenames, not just one.

The slider slides property will be this expression and the dynamic src for the image will just be $value

That way it will loop through the generated array and use each value for the src

[Robert_LM]

hi and thx
Patrick said that what he saw in the vert 1st post was a JSON string. And the function would parse that and make a suitable array for Swiper (which Dorian indicates that it did). And I don’t think my data is functionally diff. than in that 1st post.
But I’m still not sure what you’re saying with the “$value” thing.

[bpj]

Move the expression that ends query.parseJSON() to the dmx-bind:slides and set the dmx-bind:src for the image to $value

[Robert_LM]

<div is="dmx-swiper" id="swiper1" dmx-bind:slides="sc_query.data.query.veh_images.parseJSON()" centered-slides="true" auto-height="true">
    <div class="swiper-slide">
        <img dmx-bind:src="$value" width="200">
    </div>
</div>

this causes console error:

If I remove that entire Swiper it runs with no error.