Grab the first item in jQuery Template array

Question

I have an array sizes that I can access in my jQuery template. However, in a certain scenario the array only have one item and i'd like to access it directly. How can I do this with jQuery templates?

This attempt does not work:

<input type="hidden" name="product_id" data-related-product-id="${$index}" value="${sizes[0]}${product_id}" />

and outputs this:

<input type="hidden" value="[object Object]{product_id}" data-related-product-id="1" name="product_id">

I can't seem to find any documentation on how to do this.

This is the output from a JSON.stringify on sizes.

[{"product_id":"51507322000","free_stock":"0","Size":"000xs","title":"XS","sizes_group_id":"29,33","oos_status":"0","Dept":"51","slug":"this-is-the-slug","sizes_group":{"29":{"id":"29","title":"XS","position":"20","type_title":"Clothing","depts_to_include":",01,15,11,31,32,21,22,23,24,42,41,51,61,13,29,45,46,35,55,28,26,20,33,19,14,16,25,27,18,17,65,98,","depts_to_exclude":",81,85,"}},"product_url":"https://crmpicco.dev/p/this-is-the-slug/"},{"product_id":"51507322001","free_stock":"4","Size":"001s","title":"S","sizes_group_id":"30,34","oos_status":"0","Dept":"51","slug":"this-is-the-slug","sizes_group":{"30":{"id":"30","title":"S","position":"21","type_title":"Clothing","depts_to_include":",01,15,11,31,32,21,22,23,24,42,41,51,61,13,29,45,46,35,55,28,26,20,33,19,14,16,25,27,18,17,65,98,","depts_to_exclude":",81,85,"}},"product_url":"https://crmpicco.dev/p/this-is-the-slug/"},{"product_id":"51507322002","free_stock":"4","Size":"002m","title":"M","sizes_group_id":"31,36","oos_status":"0","Dept":"51","slug":"this-is-the-slug","sizes_group":{"31":{"id":"31","title":"M","position":"22","type_title":"Clothing","depts_to_include":",01,15,11,31,32,21,22,23,24,42,41,51,61,13,29,45,46,35,55,28,26,20,33,19,14,16,25,27,18,17,65,98,","depts_to_exclude":",81,85,"}},"product_url":"https://crmpicco.dev/p/this-is-the-slug/"},{"product_id":"51507322003","free_stock":"9","Size":"003l","title":"L","sizes_group_id":"32,38","oos_status":"0","Dept":"51","slug":"this-is-the-slug","sizes_group":{"32":{"id":"32","title":"L","position":"23","type_title":"Clothing","depts_to_include":",01,15,11,31,32,21,22,23,24,42,41,51,61,13,29,45,46,35,55,28,26,20,33,19,14,16,25,27,18,17,65,98,","depts_to_exclude":",81,85,"}},"product_url":"https://crmpicco.dev/p/this-is-the-slug/"},{"product_id":"51507322004","free_stock":"4","Size":"004xl","title":"XL","sizes_group_id":"35,40","oos_status":"0","Dept":"51","slug":"this-is-the-slug","sizes_group":{"35":{"id":"35","title":"XL","position":"24","type_title":"Clothing","depts_to_include":",01,15,11,31,32,21,22,23,24,42,41,51,61,13,29,45,46,35,55,28,26,20,33,19,14,16,25,27,18,17,65,98,","depts_to_exclude":",81,85,"}},"product_url":"https://crmpicco.dev/p/this-is-the-slug/"},{"product_id":"51507322005","free_stock":"2","Size":"005xxl","title":"XXL","sizes_group_id":"46","oos_status":"0","Dept":"51","slug":"this-is-the-slug","sizes_group":{"46":{"id":"46","title":"XXL","position":"25","type_title":"Clothing","depts_to_include":",01,15,11,31,32,21,22,23,24,42,41,51,61,13,29,45,46,35,55,28,26,20,33,19,14,16,25,27,18,17,65,98,","depts_to_exclude":",81,85,"}},"product_url":"https://crmpicco.dev/p/this-is-the-slug/"}]

Answer 1

Based on the size array structure, you will have to do something like this: ${sizes['somethingHere'][0]}.

You can use JSON.stringify(sizes) to dump and see whatever the [object Object] contains.

Edit:

Replace ${sizes[0]}${product_id} with ${sizes[0]['product_id']} in your code. That should get you the first element in your array (or the only element if there is only one).

Answer 2

Use ${sizes[0]['product_id']}, which will give you product id for the first product in product array.

Glad, you problem got resolved.

Happy Coding :-)