Get cms items as array within script on page

Design help Custom code
1

There is a mehtod to get array of CMS elements through GET -method, using authorization etc. But can I get the sama within the custom code -element or script loaded within a page at webflow site?

At custom code I can select the fieldname, but I cannot select whole array, in order to make adjustments before showing. For example, to combine some of them if some fields has same value, and then calculating new amount or other specific needs for situation.

I know I can get HTML code by using something like
const cmsItems = cmsContainer.querySelectorAll(“.items”);

but that again gives me the HTML, but before that I would just need the actual itemdatas, not HTML.

So how can I get similar to what I could get with “accessing from outside” -mehtod (GET with authorization), within the page custom code or script tags before end of body?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

It depends entirely on what data you’re trying to get.

If you just want data that’s already on the page via collection lists, you can just emit it into Embeds or custom attributes and generate your own JSON array.

If you need to be able to query CMS content that’s not on the page, a better production solution would be to sync the CMS to an external db, e.g. Whalesync + Supabase, then your client side JS can query Supabase for what it needs.

It might be possible to hack something together in-between using Finsweet CMS Load but you’d have to reverse-engineer their data-structures to access the data.

3

The data is already on the page with the normal collection list.
I would just need to make few adjustments to it before placing the data to page. As an example. having results from a running competition at the CMS, and then seeing if few of them has same time, to put those to same div (as in best times in one div, second best at another etc) and also calculate how many of similar results to know the rank etc programmatically adjustments.

Your proposed solution to emit the list to Embeds or custom attributes sounds something that could work, but how to do that actually? I mean, I can create the attribute, but how to include whole array of collection list as value?
I see I can attach a single value of certain field there, but not the array itself.
I could then retrieve it through JS, but how to include the Array there?

Or at Code Embed, how to include whole array of items, instead of single field value? Also, it seems that when using the Collection List -element, I can add the Code Embed only to item-level, when it’s already within single item, instead of giving possibility to modify it before looping it through.

The other solutions you brought up could maybe work as workaround, but feels like an overkill, if the collection is anyway already loaded within the page through Collection List.

Thank you also for the tip, at least I could check also that Finsweet CMS if it has something I could use here

4

The embed is inside of the collection list, and represents a single record. So one way I do this is to create a JSON object like;

<script type="mydata">
{
  "name": "<Name field embedded here>", 
  "raceFinish": "<Time field embedded here>", 
  "place": "<Place field embedded here>"
}
</script>

Then your script would find all type=“mydata” scripts, extract the innerText, JSON.parse it to an object, and add it to your array. At the end, you have an array of all of your CMS data, ready for your JS to use, sort, whatever.

This script block will be ignored by the browser for rendering purposes because it’s a script and the type is unknown.

Two things though.

  1. Webflow’s +add field in embeds HTML encodes the inserted data, which isn’t the same as JSON-encoding. Characters like a double-quote in your content could invalidate the JSON.
  2. A few CMS fields types cannot be embedded, like rich text fields.

I’ve built some libraries years ago to help with this, but they’re a bit ancient and dusty, I rarely need them on modern client projects. All of them are part of SA5 Data-

About SA5's Data Lib | SA5 | Sygnal Attributes | Designed for Webflow

Here’s a older doc that generates “tables” from datasources defined much like I’ve described above. This may still be fully supported in SA5 Data, you’d have to test it.

Collection List Data Source 📝 | SA5 | Sygnal Attributes | Designed for Webflow

At some point, I got annoyed with the HTML encoding problem regarding +Add field and designed a new spec to work around it, which I call HSON ( HTML Structured Object Notation ).

SA5 Data ( HSON ) ❺🧪 | SA5 | Sygnal Attributes | Designed for Webflow

The parser is fully implemented to convert HSON to JS objects. However I don’t think I integrated this directly into the SA5 Data’s database model as I’m rethinking the naming conventions for data-binding. A lot of reasons, including the need to access external data sources like RSS feeds in some cases.

In short there is a lot of stuff that could help you in your build, but you’re sorting through a series of 90% finished projects.

Fwiw, SA5 evolves driven by client project needs. If you need some dev help building this out, drop me a message and we’ll chat. I’d likely use HSON since it’s the easiest for you to manage in Webflow.