Streaming live at 10am (PST)

How do I get Collections data into Javascript?


#1

I am still learning Webflow and I’m trying to figure out if it can do what I need it to do.

What I want is to have a button on a page and when a user clicks that button, a random item from a Collections appears.

First, I want to avoid page loads at all costs here. This must be instant, so no directing to a different Collections page. This also means that custom Javascript is the only option. I am quite familiar with Javascript, so as long as I can use ‘Embed Code’, this should work fine.

My only hurdle at this point is that I do not know how to get the data from the Collections. My first thought was to google around and I found the CMS API documentation. The issue here is that the CMS API requires keys and appears to be meant for backend to backend integrations rather than user interactions. ( I don’t want to give users keys to insert or delete data from my collections )

An alternative approach could be to have the Collection data be inserted into a tag as a JSON and reference that within the javascript code. I’m completely fine with users being able to view the entire list, I just don’t want them being able to change my data if they rip the api_key from the javascript in their browser.

The rules ask that I provide a link to the closest thing that accomplishes this. This is the closest thing that I could think of: http://www.fantasynamegenerators.com/english_names.php Please note how clicking “Neutral Names” does not refresh the page but is still able to display random results? That is what I am trying to accomplish.

Is this possible? Does anyone know how to do this?

EDIT: Before anyone mentions that I am not following the rules for the ‘Custom Code Help’ forums, let me please mention a few things. #1 I do not want to post a link to the read-only or the published site as it has sensitive content and is currently password protected. Plus it won’t be very helpful as nothing related to this issue is in place. #2 I am not trying to link to a 3rd party plugin, I’m trying to write custom code myself. #3 There is nothing to screenshot aside from a button and an empty div. #5 There are no errors, at least not yet.


#2

When you add custom code inside of a custom code component, you can select a part of your script and replace it with a dynamic variable from a collection by clicking on the +Add Field purple link at the top right of the custom code box.

This link is only visible when:

  • the component is inside of a Collection List on any page
  • the component is inside of a Page Template

Also woks with custom code zones at Page Settings level, when you’re on a Page Template.

Finally, a reminder that a custom code component or box is limited to 10.000 characters.


#3

@vincent That’s pretty cool. However, like I said in my example above, I don’t want the data from a single item in a collection, but instead I need the entire collection. Each item in the collection has multiple data fields, for simplicity let’s just say it has the textfield Name, a separate number ID, and a color field Color. With this example, how would I be able to make this:

var data = {
    [ID1]: {
        'name': [NAME1],
        'color': [COLOR1]
    },
    [ID2]: {
        'name': [NAME2],
        'color': [COLOR2]
    },
    ........
}

Is something like this possible? This is necessary because I will be selecting an item from the collection at random.

Also, I hate to complicate things further but I realized that the collection that I plan to use has a foreign key to another collection. Could I also get the data from that related collection as well?