How do I populate a data model based on a URL parameter?

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
Cat Image Details page

Builder public api key
0285bf243b474fd88e0b15e5bf5bdc7e

What are you trying to accomplish
I want to set up a page as follows -
A user can visit a Builder page on our site with a URL path parameter:
/cat-image-details/0XYvRd7oD ← this is the imageId in the URL

The imageId is used to load from an API (https://api.thecatapi.com/v1/images/0XYvRd7oD)
The API data is used to populate a Data Model on the page (Cat Image).
Someone else using builder.io can set up items on the Cat Details page that reference the properties in the Cat Image model. The data should be populated based on what was provided in the URL.

Screenshots or video link

Code stack you are integrating Builder with
Angular

Reproducible code example

2

I found that I can set the model as an input on a page or section, but it’s unclear how to convert the remote data from the API into a model. I was thinking if the page is set up to load the model and bind it to a field on the detail section, I could use that model in the details section contents… but I couldn’t figure out how to get from JSON to model.

Also, I couldn’t figure out how to read an input parameter from a segment of the URL.

3

Hi @rmorrise

You can possibly use targeting Targeting Content - Builder.io

You can also use Dynamic Preview URL and use data binding.

Let me know if you face any further issues!