I have a REPEATER control that has one SELECT Control which is used to select a WordPress Page. I want to ensure that the repeater Label is the Page Title. My script returns a Javascript object instead of the page title. Here is my code:
` $page_list = \Core_Elementor_Extensions::core_get_pages();
$page_list_json = json_encode($page_list);
$repeater->add_control(
'posts_pages',
[
'label' => esc_html__('Pages', 'core'),
'type' => Controls_Manager::SELECT,
'options' => $page_list,
'label_block' => true,
'multiple' => false,
]
);
$this->add_control(
'core_page_list',
[
'label' => __('Content', 'core'),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'title_field' => "<# "
. "let labels = #>" . $page_list_json . "<# ; " // Now the labels are available to the javascript
. "let key =#>" . '{{ posts_pages }}' . "<# ;"
. "let label = labels[key]; "
. "#>"
. "{{{ label }}}",
]
);`
The {{{ label }}} returns {"11":"Page Title", "22":"Page Title 2"}88888 the 8888 is actually the '{{ posts_pages }}' in the the_field value which was trying tp pass as the KEY to access the returned Js Object above.
I am not really familiar with underscorejs templating.
Here is the solution that worked:
//Use Json Encode to convert array or object to JSON representation which will be like a javascript object
$page_list_json = json_encode($page_list);
//Get your array/object in my case pages
$page_list_json = $page_list;
$repeater->add_control(
'posts_pages',
[
'label' => esc_html__('Pages', 'core'),
'type' => Controls_Manager::SELECT,
'options' => $page_list,
'label_block' => true,
'multiple' => false,
]
);
$this->add_control(
'core_page_list',
[
'label' => __('Content', 'core'),
'type' => Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'title_field' => "<# "
. "let labels = $page_list_json; " // Now the labels are available to the javascript
. "let label = labels[posts_pages]; "// Get the value of the selected page
. "#>"
. "{{{ label }}}",//Show the value at the repeater title section
]
);