初始化 material 设计 bootstrap 标签

Question

我在 Laravel 应用程序中使用 Material Design Tags。

<div class="chips chips-placeholder chips-initial"></div>

我想用存储在数据库中的值初始化这个 chips 元素:

["kingfisher", "art"]

在 blade 中我得到 $art->keywords 如下：

array:1 [▼
  0 => "art"
]

如何将此值分配给以下 jQuery 代码？

$('.chips-initial').material_chip({
    data: [{
      tag: 'Tag 1',
    }, {
      tag: 'Tag 2',
    }, {
      tag: 'Tag 3',
    }],
  });

我试过这个：

var keywords[] = "{{ json_encode($art->keyword) }}";
console.log(keywords);
$.each(keywords, function( index, value ) {
    alert( index + ": " + value );
})

但是我收到以下错误：

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ["art"]

我也试过这个：

var keywords = "{{ json_encode($art->keyword) }}";
$.each(JSON.parse(keywords), function( index, value ) {
    alert( index + ": " + value );
});

收到此错误：

Uncaught SyntaxError: Unexpected token & in JSON at position 1

如果数组是数字则一切正常，即 [1,2,3]

Answer 1

var keywords = '{{ json_encode($art->keyword) }}';
if(keywords != 'null'){
    var data = JSON.parse(keywords.replace(/"/g,'"'));
    var option = {}; // my object
    var options =  []; // my array
    $.each(data, function( index, value ) {
        option = {
            tag : value 
        }
        options.push(option);
    });
    console.log(options);
    $('.chips-initial').material_chip({
        data: options,
    });
}