Initialize material design bootstrap tag

Question

I'm using Material Design Tags in my Laravel application.

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

I want to initialize this chips element with values stored in a database:

["kingfisher", "art"]

And in blade I'm getting $art->keywords as following:

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

How can I assign this value to below jQuery code?

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

I tried this:

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

But then i recieve the following error:

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

I also tried this:

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

Recieving this error:

Uncaught SyntaxError: Unexpected token & in JSON at position 1

Everything is ok if the array is numeric ie, [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,
    });
}