Javascript params из строкового значения

Question

Я хочу установить динамические параметры для плагина TagEditor ( или любого другого плагина с параметрами ) в соответствии с массивом параметров в строке (из php), у меня есть div таким образом.

<textarea class="tag-editor" type="text" name="xxxx" data-attributes-js="{placeholder:'1,2,3,4',other_para,:true,....}"></textarea>

Итак, в JS я хочу получить эти параметры и вернуть их оценки, чтобы tagEditor работал с этими динамическими параметрами.

var $input = $('.tag-editor');
$input.tagEditor( $input.attr("data-attributes-js") );

но это не работает, как я могу заставить это работать таким образом?

Answer 1

Не уверен, какие возможности у вас есть на вашем PHP-сервере, но в целом:

1. создайте реальный объект, затем зафиксируйте его
2. отправьте его в виде строки JSON
3. разобрать JSON обратно в объект
4. передать объект в .tag-editor()

/* Server Back-end */
/* 
this is not code for server -- it's just to provide the JSON string that would come 
from a server for demonstration purposes.
*/

let object = {initialTags: ["object", "json-stringify", "data", "json-parse", "tag-editor"]};

let data = JSON.stringify(object); 

/* Client Front-end */

$(".tag-editor").data('attributes-js', data);

data = $(".tag-editor").data('attributes-js');

object = JSON.parse(data);
  
$(".tag-editor").tagEditor(object);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.min.css" />

<textarea class="tag-editor"></textarea>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tag-editor/1.0.20/jquery.tag-editor.min.js"></script>

Answer 2

Вы можете изменить несколько вещей здесь, например: -

$(function(){
  
  const $input = $('.tag-editor');
  const jsString = $input.attr("data-attributes-js");
  const jsObj = JSON.parse(jsString);
  
  console.log(jsObj);;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="tag-editor" type="text" name="xxxx" data-attributes-js='{"placeholder":"1,2,3,4","other_para":true,"another_para":5}'></textarea>