Dynamic pages with data binding

Technical Questions
1

I’ve created a landing page that receives a slug (state name). In addition, I’ve created a data model that has a list of objects with a name field. To bind the data from the selected object, what is the correct way to get the specific object from the list based on the slug name matching the object name field?

state list screenshot
state list screenshot1149×837 66.4 KB

2

Hi @yuval222 ,

One way you can do it is by using custom javascript code, State is a JavaScript concept that simply says an object is in a certain state, and you can update its properties and its behaviour will change accordingly. In your case, you can filter the content of the data model based on slug and then bind the new filtered state to contents.

/*
* Global objects available:
*
* state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions
* context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down
* fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'
* Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing
*
*/

async function main() {
  if (Builder.isServer) {
    // Place any code here you want to only run on the server. Any  
    // data fetched on the server will be available to re-hydrate on the client
    // if added to the state object
    await fetch(someUrl)// fetch data model 
      .then(res => res.json())
      .then(data => {
        // set the data on the state object so you can access it from your components
        state.filteredData = data.find(element => element.stateName == slug); 
     });
  }
  if (Builder.isBrowser) {
    // Place code that you only want to run in the browser (client side only) here
    // For example, anything that uses document/window access or DOM manipulation
  }
}

export default main();