如何存储和检索materializecss芯片？答案

【问题标题】：How to store and retrieve materializecss chips?如何存储和检索materializecss芯片？
【发布时间】：2018-07-14 20:01:10
【问题描述】：

我有一个表单，我将chipsData 放入一个名为#hiddenTags 的隐藏输入字段中，因为我不希望您使用AJAX 调用，因为我有一个预先存在的表单。下面是我如何将芯片数据放入隐藏输入中。

$("form").on("submit", function() {  

    var tags = M.Chips.getInstance($('.chips')).chipsData;
    var sendTags = JSON.stringify(tags);
    $('#hiddenTags').val( sendTags );

});

我将它发送到这样的数据库：（PHP）

$this->tags = json_encode( $data['tags'] );

但是，像这样保存数据会引发各种问题。我正在使用 Twig 来显示数据。

下面是我尝试显示它的方式，但是这样我得到一个错误unexpected token & in json

  $('.chips').chips();
  $('.chips-initial').chips({
    data: {{ json }}
  });

我也试过把json放到一个隐藏的输入中，然后放到jquery中：

  <input id="raw_json" type="hidden" hidden value="{{ user.tags }}">

  var json = $('#raw_json').val(); 

  $('.chips').chips();
  $('.chips-initial').chips({
    data: json
  });

但是，我得到了Cannot read property 'length' of undefined的错误

如果我做了一些愚蠢和/或完全错误的事情，我们深表歉意，非常感谢任何帮助。

【问题讨论】：

在将其传递给芯片对象之前，您是否将其转换回数组？

标签： php jquery twig materialize

【解决方案1】：

因此，您的问题的答案在于在初始化芯片对象时设置值，以及解析 JSON 数据。

从那里只在添加或删除芯片时更新文本框。

   var chipsData = JSON.parse($("#Tags").val());

    $('.chips-placeholder').chips({
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
        data: chipsData,
        onChipAdd: (event, chip) => {
            var chipsData = M.Chips.getInstance($('.chips')).chipsData;
            var chipsDataJson = JSON.stringify(chipsData);
            $("#Tags").val(chipsDataJson);
        },
        onChipSelect: () => {

        },
        onChipDelete: () => {
            var chipsData = M.Chips.getInstance($('.chips')).chipsData;
            var chipsDataJson = JSON.stringify(chipsData);
            $("#Tags").val(chipsDataJson);
        }
    });

【讨论】：