Initialiser la balise bootstrap de conception matérielle

Question

J'utilise Material Design Tags dans mon application Laravel.

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

Je veux initialiser cet élément de puces avec des valeurs stockées dans une base de données:

["kingfisher", "art"] 

Et la lame, je suis en train de $art->keywords comme suit:

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

Comment puis-je attribuer cette valeur au-dessous du code jQuery?

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

J'ai essayé ceci:

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

Mais je reçois l'erreur suivante:

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

J'ai aussi essayé ceci:

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

RECEVOIR cette erreur:

Uncaught SyntaxError: Unexpected token & in JSON at position 1

Tout est ok si le tableau est-à-dire numérique, [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, 
    }); 
}