Symbol - fetch data based on custom field

Technical Questions
1

I am trying to build a symbol that will allow editors to add a product block to their blog content. To that end, I’d like for them to be able to add a productId to a designated custom field for the symbol. I would like to use the value of the field as a variable in a fetch call that I make in the custom JS for the symbol, then using that result set, bind the properties of various pieces of the symbol to the data in that result. For the life of me, I can’t find an example of how to refer to the value of a custom field within the custom JS. I’ve tried state.FIELD_NAME and I’ve tried using the FIELD_NAME directly but neither of those seems to work as expected.

const host = ‘https://**********.amazonaws.com/dev’;
const nailProductId = state.nailProductId;
console.log({nailProductId});
fetch(${host}/nailproducts/read?filter=nailProductId%20eq%20${nailProductId})
.then(res => res.json())
.then(data => {
console.log({data});
state.product = data[0];
})

console.log({nailProductId}); is outputting {nailProductId: undefined}

And yes, I have a nailProduct with the nailProductId I have in the symbol by default.

UPDATE: if I hardcode a value in place of the reference to state.nailProductId, I get data in the console.log({data}) line

Please add to the FAQs how to reference a field from the current content item in the JS of another content item (or in the custom JS for the component/symbol/content item). I see how to reference part of the URL to customize a fetch for binding data, but not how to reference data from the component itself.

2

Hello and thanks for posting! You should be able to access the input via state.nailProductId as long as the symbol has an input for that field. I would suggest adding an Input (via the data tab) that looks something like this:

image
image788×1050 25.7 KB

Then, when adding the symbol to a page or piece of content the end user can add enter a value on the Options tab:

image
image796×806 26.4 KB

3

I do have an input on the symbol and the a value has been added on the Options tab.


and
4

It looks like the input is called productId instead of nailProductId, I updated the assignment here and it looks to be working:

const nailProductId = state.productId;
5

:man_facepalming:

Thanks :slight_smile:

What happens when you code not having had enough to drink.

6

No worries, glad you got it working and nice to see you taking advantage of some of our advanced features!